该效果可以用js实现

langzhiwang888

浏览: 182132 次
性别:
来自: 青岛

最近访客更多访客>>

xubbsun

luckyhan0218

zihai367

logcy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

经常看到各大网站（例如：天涯，网易，阿里巴巴）的底部会有一个能够固定的漂浮条，该效果可以用js实现，但是今天新鲜代码站推荐一个纯css方法，更加简洁方便。

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代码如下：

<div id="bottomNav">这里加入你的代码固定底部漂浮</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）。

Html代码
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5.<title>CSS+DIV固定底部的漂浮导航条（多浏览器兼容）</title>
6.<style type="text/css">
7.body { background-image:url(text.txt); /* for IE6 */
8.background-attachment:fixed; }
9. #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */
10. _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }
11.</style>
12.</head>
13.
14.<body>
15.
16.
17.<div id="bottomNav">这里加入你的代码固定底部漂浮</div>
18.
19. 
20. 
21. 
22. 111111111111
23. 
24. 
25. 
26. 
27. 11111111111
28. 
29. 
30. 
31. 
32. 
33. 
34. 122222222222
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
43. 
44. 
45. 222222333333333
46. 
47. 
48. 
49. 
50. 33334444444444444
51. 
52. 
53. 
54. 
55. 
56. 
57. 
58. 
59. 
60. 
61. 
62. 55555555555555555
63. 
64. 
65. 
66. 
67. 
68. 
69. 
70. 
71. 
72. 
73. 
74. 888888888888888888
75. 
76. 
77. 
78. 
79.</body>
80.</html>

Html代码
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3. <head>
4. <title> New Document </title>
5. <meta name="Generator" content="EditPlus">
6. <meta name="Author" content="">
7. <meta name="Keywords" content="">
8. <meta name="Description" content="">
9.
10. <style type="text/css">
11. .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
12. .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
13. .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
14. .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
15. /* 上面的是除了IE6的主流浏览器通用的方法 */
16. * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
17. * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
18. * html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
19. * html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
20. * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
21. </style>
22. </head>
23. lkji 
24. lkji 
25. lkji 
26. lkji 
27. lkji 
28. lkji 
29. lkji 
30. lkji 
31. lkji 
32. lkji 
33. lkji 
34. lkji 
35. lkji 
36. lkji 
37. lkji 
38. lkji 
39. lkji 
40. lkji 
41. lkji 
42. lkji 
43. lkji 
44. lkji 
45. lkji 
46. lkji 
47. lkji 
48. lkji 
49. lkji 
50. lkji 
51. lkji 
52. lkji 
53. lkji 
54. lkji 
55. lkji 
56. lkji 
57. lkji 
58. lkji 
59. lkji 
60. lkji 
61. lkji 
62. lkji 
63. lkji 
64. lkji 
65. lkji 
66. lkji 
67. <div id="ss" class="fixed-bottom" style="background-color: red;">1111</div>
68. <body>
69.
70. </body>
71.</html>


http://www.xiaoneidaima.com/art_css/20101118/111R332010.html

分享到：