开发者社区> 余二五> 正文

固定DIV不随滚动条滚动

2017-11-15 1473

简介：

+关注继续查看

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

<!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，如需转载请自行联系原作者

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

全面分析RHCE7（红帽认证工程师）考试题目之 ----Samba文件共享篇 3724 Python:使用pycha快速绘制办公常用图(饼图、垂直直方图、水平直方图、散点图等七种图形) 3906 用Windows Server实现软件定义存储之存储空间直连 3460 linux配置Cacti 2528 yum 安装出现GPG密钥失败 4424

相关文章

前端技术栈

小程序隐藏滚动条但还能继续滚动

小程序隐藏滚动条但还能继续滚动

45 0

欧阳呀

echarts 显示隐藏后宽度高度变小问题

笔记

231 0

森叔笔记

div 滚动条自动保持在底部

div 滚动条自动保持在底部

122 0

yechaoa

BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等

BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等

737 0

晚来南风晚相识

原生js判断某个区域的滚动条滚动到了底部

原生js判断某个区域的滚动条滚动到了底部

102 0

馒头~

iframe去掉竖向滚动条仍可以滚动

iframe去掉竖向滚动条仍可以滚动

710 0

烟海之蓝

div高度自适应宽度按比例放大

导语：我们经常会碰到这样的需求：要求div高度跟随宽度变化而变化。在手机端，一张图片作为div的背景图，图片宽高比不一致，并要求div宽高比与图片宽高比一致；怎么实现这种需求呢？原理 padding-top: 50%;用这个属性的百分比，padding-top的百分比是相对于父元素的宽度，比如：...

1512 0

五个半柠檬

前端吸顶功能，滚动到一定位置时固定到顶部

3943 0

技术小阿哥

判断滚动条是否滚动到最底端

981 0

最美的回忆

CSS侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应

1098 0

+关注

余二五

文章

问答

视频

作者高分内容

更多

全面分析RHCE7（红帽认证工程师）考试题目之 ----Samba文件共享篇 3724 Python:使用pycha快速绘制办公常用图(饼图、垂直直方图、水平直方图、散点图等七种图形) 3906 用Windows Server实现软件定义存储之存储空间直连 3460 linux配置Cacti 2528 yum 安装出现GPG密钥失败 4424

文章排行榜

最热

最新

1 干掉 “重复代码”，这三种方式绝了！ 34593

2 万能架构设计：ES+Redis+MySQL，这套组合可应对80%业务场景（2） 29279

3 使用篇丨链路追踪（Tracing）很简单：链路拓扑 28646

4 如何提高光伏发电效能异常检出效率的实践案例 26490

5 日志服务 SLS 和开源 ELK 全面对比 26261

6 阿里云蔡英华：Landing Zone助力生态伙伴成为企业云治理服务专家 23888

7 如何画好一张架构图？（3） 21134

8 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 13733

9 实践教程之体验PolarDB-X分布式事务和数据分区 8747

10 如何解决IoT数据入仓的客户实践 7028

11 Python3，自从掌握了这个方法，再也不用print进行调试了。 11438

12 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 331739

13 阿里云优惠口令（2023更新） 5632

14 大数据&AI产品月刊【2023年4月】 3744

15 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 53694

16 编程中最难的就是命名？这几招教你快速上手 31167

17 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 49137

18 除了价格降70%，关于对象存储预留空间你还需要了解这些 30620

19 RocketMQ 多级存储设计与实现 20659

20 实践教程之基于Prometheus+Grafana的PolarDB-X监控体系 33947

1 细说Dataphin自动解析 62

2 高手交锋，专业对决！阿里云重磅新品评测令！ 77

3 TechEmpower 21 轮 Web 框架性能评测 -- C# 的性能和 Rust、C++ 并驾齐驱 55

4 计组存储层次简析 62

5 电商行业实践专栏上线｜阿里巴巴风控实战如何解决大规模风控的技术难点？ 81

6 一文搞定Kubernetes，零基础到上手1 51

7 瑶池数据库SQL-问题二 518

8 阿里云开源数据库PolarDB分布式版入门训练营开营报名中！ 442

9 PAI-Diffusion中文模型全面升级，海量高清艺术大图一键生成 58

10 AIGC：在云上从0开始搭建langchain-ChatGLM，构建私域知识问答机器人DEMO 128

11 【操作系统】操作系统IO技术底层机制和ZeroCopy 10280

12 Spring Boot + URule规则引擎，太顶了！ 3934

13 go语言｜数据结构：二叉树可视化（svg树形图改进版） 51

14 go语言｜数据结构：二叉树可视化（制作svg格式树形图） 10154

15 Springboot整合Quartz 10222

16 go语言｜数据结构：二叉树（2）广度和深度搜索 64

17 在实际开发中接触到的SQL相关的需求内容 10327

18 常用Linux命令 - 权限管理的基本命令 10259

19 R绘图案例｜基于分面的面积图绘制 10374

20 一张图看懂专有云灾备 79

相关电子书

更多

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

冬季实战营第三期：MySQL数据库进阶实战

立即下载