固定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,如需转载请自行联系原作者
目录
相关文章
|
16天前
div高度填满浏览器剩余空间(不出现纵向滚动条)
div高度填满浏览器剩余空间(不出现纵向滚动条)
10 0
|
16天前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
41 0
|
9月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
44 0
|
7月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
50 0
|
8月前
|
前端开发
css滚动到顶部自动固定
css滚动到顶部自动固定
|
12月前
|
容器
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
Echarts跟随数据长度实现高度自适应解决出现滚动条的解决方案
298 0
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
343 0
|
JavaScript
div内容超出自动滚动
div内容超出自动滚动
400 0
div内容超出自动滚动
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部

热门文章

最新文章