网页底部固定漂浮导航栏制作
2013-11-23 14:30
274 查看
有些东西找起来很麻烦,好用的就更不容易找到了,之前看到很多用JS写的固定漂浮导航栏,固定漂浮这种效果拖动时难免会产生抖动。
自己还是蛮喜欢CSS的,找来找去找到了天涯,仔细一看是纯CSS的代码,没有使用JS效果。
我觉得它比之前看到的要精简些不用嵌套多余的DIV。
简单的看一下CSS样式部分:
HTML部分加上这个id为 #bottomNav 的DIV即可:
再看看这些需要注意的地方:
看到 _top 大家都知道是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的。
解决方法我们为IE6添加这样一条语句:
注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。
PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。
相比之下我更喜欢天涯这样的纯CSS写法,这里是DEMO。
固定漂浮选择这样写的理由:
可能更好的固定漂浮导航我没有发现,如果你有更多更好的方法别忘了告诉我哈!
自己还是蛮喜欢CSS的,找来找去找到了天涯,仔细一看是纯CSS的代码,没有使用JS效果。
我觉得它比之前看到的要精简些不用嵌套多余的DIV。
简单的看一下CSS样式部分:
以下为引用的内容: body { background-image:url(text.txt); /* for IE6 */ background-attachment:fixed; } #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; } |
以下为引用的内容: <div id=”bottomNav”>固定漂浮物在此处O(∩_∩)O~</div> |
以下为引用的内容: _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); |
解决方法我们为IE6添加这样一条语句:
以下为引用的内容: background-image:url(text.txt); |
PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。
相比之下我更喜欢天涯这样的纯CSS写法,这里是DEMO。
固定漂浮选择这样写的理由:
以下为引用的内容: 纯CSS的写法,避免了多嵌套一层外部DIV制作假滚动条造成的网站重构麻烦的尴尬场面。 同时不会有JS漂浮所产生的抖动效果。 |
相关文章推荐
- 网页底部固定漂浮导航栏制作
- Android之RadioGroup+ViewPager制作的底部导航栏
- CSS固定在网页底部的层div
- 网页底部固定版权信息
- Android之RadioGroup+ViewPager制作的底部导航栏
- Android之RadioGroup+ViewPager制作的底部导航栏
- js制作点击会自动隐藏的导航栏(固定在在头部的)
- 网页内容高度不够时,让footer处于页面底部的方法(不是固定在底部)
- 制作一个简易的网页,用不同的颜色区分头部、内容以及底部,在滚动页面的过程中,底部保持不变。
- 页面顶部固定漂浮导航栏,漂浮div,div背景透明
- Bootstrap制作 精美渐变顶部固定自适应导航栏
- 网页顶端或底部固定层
- CSS Div固定在网页顶部、底部、左侧、右侧
- 总结--IE6,IE7,IE8,火狐都支持:js/css 底部固定, 底部固定漂浮导航效果
- CSS制作始终固定页面底部的DIV
- CSS+DIV固定底部的漂浮导航条(多浏览器兼容)
- 如何将网页底部始终固定在页面底部而不是浏览器底部
- html中导航栏固定在头部或者底部
- 仿天涯底部固定漂浮导航
- 仿天涯底部固定漂浮导航