这里稍微总结一下,那就是利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点:
1、使用了大量的计算,每次滚动,都少不了一大堆的运算。
2、使用了JavaScript脚本,脚本这东西受到浏览器的限制,即便没有限制,也同样因为网页的下载模式问题,可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3、条条大路通罗马,但是看看那方块,当快速滚动滚动条的时候,会发现那个可爱的方块抖动地厉害。这也难怪,那么多的计算谁能受得了?
那有没有比较“平静”高效的表示方式呢?比如是否有一种用CSS的方式呢?
首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position属性,说到定位,我们很容易想到这个属性。这个属性一共有四个选项:static、relative、absolute、fixed。很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的:
写道
fixed:
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
于是我们很快就有了以下的代码,不过很遗憾,IE中并不能通过严格的测试,但是FireFox中却可以通过测试!
<html>
<head>
<!--http://volnet.cnblogs.com-->
<title>Only fit FireFox! </title>
<!--Some thing about the fixed style!-->
<style type="text/css">
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
</style>
</head>
<body>
<div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>
<div style="height:888px;"></div>
</body>
</html>
不管上面上面说的IE7的strict模式,很显然,除了IE7,我们的挑战还有包括IE6在内的一大堆未知的因素。很显然,虽然这个方法通过了FireFox,但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么?(我指的是用JavaScript的时候效果很卡)
当然不行,我们的症结究竟在哪?我们该如何去解除它呢?带着这样的郁闷,我们需要开始新的探险。
HTML究竟是啥?
这个问题换在别的地方问,您可能要搬出一大堆的文档来告诉我HTML的定义,但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的<tag></tag>组成的,而这一大堆的<tag></tag>组合在一起,它们的结构就像一棵树,是的,HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根,那就是<html></html>节(root),在根节点下常见的节点中,我们通常能见到<head></head>和<body></body>两个节点,它们之下又有……
现在回顾一下我们的问题,我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题,啥是滚动条?
滚动条,顾名思义,就是可以滚动的条(ScrollBar)(废话)。准确地说,滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候,为了能够让有限的空间展示无限的内容所作出的一个妥协的元素,使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的HTML中呢?又或者它是浏览器的固有的一部分?
如果您觉得它是HTML中的一部分,那么您就对了,因为它是依附容器而存在的,而默认产生滚动条的容器是<body></body>或者<html></html>节,它并不是浏览器固有的一部分,浏览器只是默认完整展示了一整个html文档,并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧,假设fixed对您当前(失败)的浏览器无效的话,那么我们来看看它们的结构,外面是html标签,向内是body标签,再向内则是div标签,div标签很明显是它们的一部分,这样假设我们的div标签所设置的定位属性无论如何(四个可能的属性皆没起到什么作用)改变不了自身显示状况。我们能否更换一个思路呢?
刚才我说了,滚动条是容器所固有的,不管是外面那个滚动条,还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢?
看到滚动条的控制可以通过CSS的overflow的几个属性来控制,想必大家都不陌生了。(陌生的朋友点击相关链接即可进入查看)
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢?(虽说是模拟,但是效果一模一样噢~)
<html>
<head>
<title></title>
<style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</style>
</head>
<body>
<div class="fixed_div">I am still here!</div>
<div class="virtual_body">
<div style="height:888px;">
I am content !
</div>
</div>
</body>
</html>
分析:
html,body:将默认可能会随机出现的滚动条,完全地隐藏了,这样不管您放了啥内容,它们都不会出来了。
.virtual_body:顾名思义,就是一个假的body了,它被设置为长宽都为100%的,意思就是它利用了所有可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。
.fixed_div:这下它可以利用绝对值进行定位了,因为在这个场景下,这个页面100%地被那个假冒的body给独霸了,而滚动条反正也出不来,您就可以自认为是在某个点蹲坑了,绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
分享到:
相关推荐
在网页设计中,"固定div,滚动到顶部固定"是一种常见的布局技巧,它可以使特定的div元素在页面滚动时始终保持在视口的可见位置,通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验,因为用户...
这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 ... 1、在body的根目录下建立两个嵌套的div 2、分别给两个div加上样式属性即可,详细请见附件index.html文件
在网页设计中,固定div(固定定位)是一种常见的布局技巧,它使得div元素在页面滚动时仍然保持在屏幕的特定位置,例如顶部导航、侧边栏等。本示例将探讨两种实现页面固定div位置的方法,并进行比较。 方法一:CSS ...
在网页设计中,"悬浮固定DIV"是一种常见的技术,它使得某个DIV元素在页面滚动时始终保持在屏幕的特定位置,如侧边栏导航、广告条或工具提示等。这种效果可以增强用户体验,使用户在浏览长页面时也能方便地访问或查看...
通过这种方式,我们可以创建一个既可拖动又可固定在屏幕任意位置的浮动DIV,提升用户的交互体验。当然,实际应用中可能还需要考虑更多的细节,比如拖动时的边界限制、响应式布局以及不同设备的支持等。
标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效,当用户滚动页面时,某个特定的DIV元素(例如一个导航栏)会保持在屏幕顶部,即使页面其他部分向下滚动,这个元素依然固定在视口的顶部。...
下面是一个简单的例子,展示了如何通过 CSS 将 `div` 设置为固定定位: ```html <!DOCTYPE html> , initial-scale=1.0"> .fixed-div { position: fixed; top: 20px; /* 设定距离顶部的距离 */ right: 20...
通过正确地设置`div`的`position`、`left`、`width`、`height`等属性,以及监听滚动事件来更新`left`值,我们可以创建出一个固定在浏览器左侧且随横向滚动而移动的`div`元素。这样的设计在很多网站的侧边栏导航或...
在网页设计中,"右固定div"是一种常见的布局技巧,它可以使某个div元素始终保持在页面右侧,并且在用户滚动页面时依然保持固定位置。这种效果通常通过JavaScript库,如jQuery来实现,因为纯CSS虽然也可以做到,但在...
**jQuery超强div固定位置布局特效插件** 在网页设计中,动态布局是提升用户体验的关键因素之一。这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮...
jquery.floatdiv 浮动层固定位置 /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置...
总的来说,"div固定在屏幕顶部"是网页布局中一个实用的技术,通过CSS的`position: fixed`属性可以轻松实现,而且可以结合响应式设计来优化不同设备的显示效果。这个知识点在许多网站和应用中都有广泛应用,是前端...
标题中的“导航固定在div中变化”指的是在网页设计中,如何实现一个导航栏(通常是一个div元素)在用户滚动页面时始终保持在屏幕顶部显示,即使div的宽度发生变化也能正常工作。这种效果常被称为“固定定位”或者...
通过这种方式,我们可以创建一个更灵活且响应式的固定div效果,确保在各种滚动场景下都能提供良好的用户体验。这种技术广泛应用于电商网站的商品详情页、新闻网站的文章列表以及各种需要突出关键导航元素的界面设计...
div+css 固定表头和列div+css 固定表头和列
在本主题“CCS固定位置,DIV固定位置”中,我们将深入探讨如何使用CSS来实现元素在页面上的固定定位,特别是关于`div`元素的固定定位。 首先,理解CSS的定位模式是关键。有四种基本的定位方式:正常流(Normal Flow...
绝对支持IE6 IE7 IE8 和 FF的div层在页面左边固定不动,右边的div层超过页面高度正常滚动。
将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间
/BODY>标签,而且会给你加上<P></P>标签的,怎么办呢,只要设置一个小的地方就可以了。 在fckconfig.js配置文件里面有FCKConfig.FullPage = false ; 改为 FCKConfig.FullPage = true 如果想去掉自动添加的代码就可以...