固定DIV不随滚动条滚动

简介:

 在项目开发中,有的页面的某些按钮,我们是不想让他跟着滚动条滚动的,比如,添加页面,有很长的内容添加,在往下滚动添加的过程中,我们始终想看到保存按钮。OK!

    

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
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
   < title > New Document </ title >
   < meta  name = "Generator"  content = "EditPlus" >
   < meta  name = "Author"  content = "" >
   < meta  name = "Keywords"  content = "" >
   < meta  name = "Description"  content = "" >
     < style  type = "text/css" >
     body{
      margin:0px;
      padding:0px;
     }
     #nav{position:fixed; top:0;left:0; width:100%; background:#F00;}
     </ style >
</ head >
< body >
< div >
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < div  id = "nav" >
         效果
     </ div >
</ div >
</ body >
</ html >


        我们看一下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位!ok!

    position:absolute,absolute是对网页边框而言的。

     如果,你用absolute加上js代码也可以实现以上效果,但是你会发现随着滚动条滚动时,那个层会晃来晃去,所以采用这种position:fixed,是可以使层固定不动的一种做法!

    我特意查了一下手册,貌似在IE6一下版本不行!

    ok?










本文转自 小夜的传说 51CTO博客,原文链接:http://blog.51cto.com/1936625305/1441433,如需转载请自行联系原作者
目录
相关文章
|
1月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
7月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
29 0
|
3月前
自定义视口高度,多余的部分使用滚动
自定义视口高度,多余的部分使用滚动
|
6月前
|
前端开发
css滚动到顶部自动固定
css滚动到顶部自动固定
渐变导航--滑动固定头部
渐变导航--滑动固定头部
|
10月前
|
容器
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
219 0
|
JavaScript
div 滚动条自动保持在底部
div 滚动条自动保持在底部
337 0
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部