固定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,如需转载请自行联系原作者
目录
相关文章
|
JSON 前端开发 JavaScript
javascript:layui实现定位、查询数据以及select筛选的组合功能
javascript:layui实现定位、查询数据以及select筛选的组合功能
542 0
|
4月前
|
算法 API 开发者
沪深A股实时行情API接入指南
逐笔Tick数据接口,查询A股上市公司的最新成交明细,确保获取市场的最新交易信息。返回示例如下:
|
NoSQL MongoDB
MongoTemplate 存在不更新 不存在则插入
MongoTemplate 存在不更新 不存在则插入的方法 【非存在更新 不存在插入的逻辑】
3535 0
|
9月前
|
云安全 边缘计算 监控
R9-9950X服务器 超越频率桎梏,企业级稳定性的新标杆!
德迅云安全推出的R9 9950X服务器专为多线程、高负载场景优化,基于AMD Ryzen 9系列的Zen 4架构,采用5nm工艺和CCD/CIOD分离设计,具备16核32线程全大核策略,确保高效能与低功耗。其自适应功耗管理和强化供电设计,保障了在企业级应用中的卓越稳定性和持续性能。搭配德迅卫士主机安全软件,提供实时监控、远程防护及资产清点等全面安全措施,适用于云计算、虚拟化和边缘计算等场景,为企业带来可靠的高性能解决方案。
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
593 111
|
机器学习/深度学习 算法
【Deepin 20系统】机器学习分类算法模型xgboost、lightgbm、catboost安装及使用
介绍了在Deepin 20系统上使用pip命令通过清华大学镜像源安装xgboost、lightgbm和catboost三个机器学习分类算法库的过程。
461 4
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
electron打包的exe程序,点击安装却执行了卸载的问题
在window平台下 electron打包的exe安装后,在没卸载的情况下,重新点击exe安装,会执行卸载,再点一次才是安装; 针对这个问题,我注释了打包里的一个配置,就好了,如下
590 0
|
前端开发
深入理解 BEM:前端开发中的命名约定革命
深入理解 BEM:前端开发中的命名约定革命
深入理解 BEM:前端开发中的命名约定革命
|
安全 API
预检请求:为跨域请求保驾护航(上)
预检请求:为跨域请求保驾护航(上)