CSS固定DIV，导航条顶部固定fixed（兼容IE6）
如下图：
固定之前：
页面往下滚动之后：
Demo免费下载：http://down.51cto.com/data/1327117
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
但是在IE6下，并不支持position:fixed属性，这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的作用大家都很熟悉，相对于父元素进行绝对定位，然后我们可以通过expression来改变#ads的top值。
什么是expression？
expression的定义：IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
重要代码如下：（注意css中对IE6兼容的处理）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/* 实例CSS */
html{
_background
:
url
(about:blank);}
/*阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求*/
body{
font-size
:
12px
;
font-family
:
Arial
,
Tahoma
,
sans-serif
;
color
:
#EEEEEE
;
text-align
:
center
;
background
:
#E2E2E2
;}
#header{
width
:
100%
;
height
:
80px
;
line-height
:
80px
;
background
:
#333
}
#topToolbar{
_display
:
none
;
width
:
100%
;
height
:
40px
;
line-height
:
40px
;
background
:
#333
;
position
:
fixed
;
top
:
-40px
;
left
:
0
;
_top
:
0
;
_position
:
absolute
;
_top
:expression(documentElement.scrollTop);
}
#content{
border
:
1px
solid
#f00
;
width
:
880px
;
height
:
1390px
;
margin
:
auto
}
#bottomToolbar{
width
:
100%
;
height
:
40px
;
line-height
:
40px
;
background
:
#333
;
position
:
fixed
;
bottom
:
0
;
left
:
0
;
_position
:
absolute
;
_top
:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
/*
document.body.scrollTop 网页滚动的距离
document.body.clientHeight 网页可见区域高
this.offsetHeight 当前元素的高度
*/
}
|
版权所有：
本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1425372，如需转载请自行联系原作者
