仿天涯底部固定漂浮导航,无JS纯CSS定义

来源:uecss.com 时间:2009-07-06 12:44:00 

好东西找起来很麻烦,好用的又不太容易找到,之前看到很多用JS写的,固定漂浮这种效果拖动时难免会产生抖动,自己对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;
}

HTML部分加上这个id为 #bottomNav 的DIV即可:

<div id=”bottomNav”>固定漂浮物在此处O(∩_∩)O~</div>

再看看这些需要注意的地方:

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

看到 _top 大家都知道是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的-_-|||
解决方法我们为IE6添加这样一条语句:

background-image:url(text.txt);

注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。

PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。
相比之下我更喜欢天涯这样的纯CSS写法,DEMO >> 。

固定漂浮选择这样写的理由:

纯CSS的写法,避免了多嵌套一层外部DIV制作假滚动条造成的网站重构麻烦的尴尬场面。
同时不会有JS漂浮所产生的抖动效果。

标签:天涯,css,漂浮,导航
0
投稿

猜你喜欢

  • Python实现随机创建电话号码的方法示例

    2021-08-31 06:38:03
  • python list删除元素时要注意的坑点分享

    2021-07-15 16:02:22
  • 如何利用python给图片添加半透明水印

    2022-08-16 09:34:28
  • SQL批量插入数据几种方案的性能详细对比

    2024-01-13 11:06:32
  • Python实现多态、协议和鸭子类型的代码详解

    2021-03-16 19:02:35
  • 基于python的列表list和集合set操作

    2023-03-20 01:38:34
  • 一个简单的SQL 行列转换语句

    2024-01-24 01:57:08
  • IE下的firebug方法

    2009-07-29 18:50:00
  • 利用python实现万年历的查询

    2023-02-24 03:16:01
  • python实现时间o(1)的最小栈的实例代码

    2021-08-01 15:24:42
  • 几个你不知道的技巧助你写出更优雅的vue.js代码

    2024-05-13 09:14:39
  • Python基础知识之函数,类,模块

    2022-10-28 05:25:36
  • 动态载入树 (ASP+数据库)

    2010-05-27 12:20:00
  • 在sqlserver中如何使用CTE解决复杂查询问题

    2024-01-24 13:31:34
  • Python-typing: 类型标注与支持 Any类型详解

    2023-10-15 19:40:43
  • python 输出上个月的月末日期实例

    2022-11-30 16:33:11
  • CSS编写过程中常见的10个错误

    2008-05-29 12:49:00
  • Python实现钉钉/企业微信自动打卡的示例代码

    2022-02-18 21:54:02
  • python的random模块及加权随机算法的python实现方法

    2023-09-04 13:32:57
  • 详解Python如何查看一个函数的参数

    2023-05-13 19:24:19
  • asp之家 网络编程 m.aspxhome.com