往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)

最新推荐文章于 2022-05-11 16:51:32 发布
最新推荐文章于 2022-05-11 16:51:32 发布
阅读量5.7k 收藏 5
点赞数 1
分类专栏： Web 文章标签： firefox chrome ie function xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Senton/article/details/7343455
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<script>
		// 定义菜单栏离页面顶部的距离，默认为200
		var divOffsetTop = 200;
		//滚动事件
		window.οnscrοll=function(){
			var div = document.getElementById("divId");
			// 计算页面滚动了多少（需要区分不同浏览器）
		 	var topVal = 0;
		 	if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678
				topVal = window.pageYOffset;
			}
			else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
				topVal = document.documentElement.scrollTop;
			}
			else if(document.body.scrolltop){//IE678 的quirk模式
				topVal = document.body.scrolltop;
			}
		 	if(topVal <= divOffsetTop){
		 		div.style.position = "";
		 	}
		 	else {
		 		div.style.position = "fixed";
		 	}
		};
		// 页面加载完之后，计算菜单栏到页面顶部的实际距离
		window.οnlοad=function(){
			var div = document.getElementById("divId");
			divOffsetTop = div.offsetTop;
		};
		</script>
	</head>
	<body>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		<div id="divId" style="width: 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
		aaaaaaaaaaaaaaaaaaaaaaa<br>
	</body>
</html>


Senton
关注
专栏目录
WebKit和Chrome源码分析
bcbobo21cn的专栏
05-24 2551
WebKit内核源代码分析 http://blog.sina.com.cn/s/blog_53220cef0100ta1i.html 摘要：本系列通过分析WebKit的源代码，试图分析WebKit的内核设计架构，模块之间的关系，分析的时候以Qt的移植为参考，涉及移植的东西不多，主要还是以内核为主。在分析内核的时候，Frame是首当其冲的一个类，本文将分析Frame类的代码。 1.    
4. javaScript基础学习笔记(下)
weixin_43957649的博客
01-19 226
本文记录的是博主复习js的学习笔记，希望能帮助到大家，不足之处，请打击包涵与指正，谢谢！
导航条随页面滚动自动置顶-兼容IE8和Chrome浏览器
zyytaiyame的博客
12-29 1313
导航条随页面滚动自动置顶 兼容IE8和Chrome浏览器主要核心JS代码如下：
固定下拉列表
weixin_44779945的博客
08-04 367
选择下拉框时，再去滚动页面，下拉框会fix在窗口上，也会遮挡住页面内容，解决方法: 在Select 标签加个getPopupContainer属性，如下图所示 <Select onChange={chooseRoom} placeholder="请选择仓储位房间" allowClear getPopupContainer={(triggerNode) => tri
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
使用js实现导航窗格在页面下拉以后固定在页面顶端
麻花猫耳朵的博客
09-28 2470
使用js实现导航窗格在页面下拉以后固定在页面顶端。 bootstrap中的组件可以实现导航栏固定在页面的最顶端，但是有些时候导航栏并不是在页面最顶端显示的，此时bootstrap组件就不适用了。经过多次测试，最终得到了这种简便方法，留存下来以便不时之需，也可以适时拿出来显摆一下，哈哈哈。。。 话不多说，直接上代码： 首先是HTML部分，当然要留出来第一个div，用来放一些标题之类的内容，随后就是导航栏，此处的container是bootstrap的栅格布局，懂的人自然懂，不懂也没关系，containe
Javascript实现滚动条下拉时,侧边栏固定的实现
weixin_30301183的博客
12-20 468
一般博客侧边栏高度小于主体内容区时，滚动条滚动到到侧边栏底部时，侧边栏固定。 JavaScript代码如下： 1 $.fn.scrollFix = function (opt) { 2 var defaults = { 3 baseTop: 50, // 初始top值 4 main: ".main" // 主体区选择器 ...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 3925
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
JavaScript 使用（笔试题）、输出、调试、事件、JS获取和修改页面元素
qq_52301431的博客
04-20 2552
一、JavaScript 使用 在Web应用程序中，JavaScript是HTML文档的一部分，它是依托 HTML 而存在的。也就是说，必须把脚本的代码放在HTML文档中，否则它无法运行。JavaScript 程序可以用任何文本编辑器来编写。 1. 行级 给标签设置对应的属性，属性值是要执行的JavaScript代码。 <a href="javaScript:alert('你已经领取过了')">领取奖品</a> ​ <input type="button" v..
层跟着滚动条浮动,随着滚动条的移动固定在浏览器顶端不跳动
08-04
层跟着滚动条浮动,随着滚动条的移动固定在浏览器顶端不跳动,不跳动哦,兼容多个浏览器
Python 中 selenium 模块
既然选择远方，便只顾风雨兼程！
02-28 515
文章目录selenium 基础语法一、 环境配置1、 安装环境2、 配置参数3、 常用参数搭配4、 分浏览器启动二、 基本语法1、 元素定位2、 控制浏览器操作3、 操作元素的方法3.1 点击和输入3.2 提交3.3 其他4、 鼠标操作5、 键盘操作6、 获取断言信息7、 等待页面加载完成7.1 显示等待7.2 隐式等待8、 页面切换9、 框处理9.1 警告框处理9.2 下拉框选择9.2.1 Select类的方法9.2.1.1 选中方法9.2.1.2 取消选择方法9.2.2 先定位select 然后在定位
html 滚动条置顶,css怎么设置网页下拉条（滚动条）样式？
weixin_42314737的博客
05-30 1229
很多朋友在网页设计中要自定义下拉条(滚动条)样式的情景，下拉条的样式我们可以通过css来控制的，下拉条能不能换颜色或者做的更好看一些呢？那么滚动条的设置都有哪些呢？下面本篇文章来介绍一下设置下拉条(滚动条)的方法。下拉条(滚动条)的设置在CSS中不能简简单单就完成，必竟它是由好多部分组成。所以我们如果想要设置滚动条就要先知道哪些是控制哪些部分的。下面一一介绍：scrollbar-face-colo...
C#开发之——MenuStrip(12.20)
我的博客
07-30 3112
一 概述 MenuStrip是Windows窗体中的菜单栏控件，直接按住MenuStrip不放，将其拖到Windows窗体中即可 <!--more--> 二 实例 在Windows窗体中创建MenuStrip菜单 2.1 页面布局 将MenuStrip控件拖拽到Windows窗体中 2.2 MenuStrip菜单添加 完成MenuStrip控件的添加后，在Windows窗体设计页面中就能看到"请在此处输入"选项，直接单击它，然后输入菜单的名称，例如："文件".
html不随页面滚动的导航栏怎么设置的,网站大全页面滚动导航菜单跟随切换_百科目录导航树小插...
weixin_28839549的博客
06-04 776
青岛门户网站：青岛政务网、人力资源和社会保障局、青岛新闻网、半岛网、青岛之窗青岛娱乐网站：半岛娱乐频道、新闻网娱乐频道、华夏娱乐青岛体育网站：青岛体育信息网、青岛大学体育学院、体育局、青岛网络广播电台体育频道先介绍一下造轮子的背景:前几天给客户设计原型，是关于一个步骤数据展示及打分的页面，客户可以在此页面上看到APP端配置的工作步骤以及采集到的数据，可以分别给每个步骤打分，在设计的时考虑到一般情况...
怎样使左侧菜单栏不随滚动条滚动
yulongkuke的博客
07-27 4859
怎样使左侧菜单栏不随滚动条滚动
刷新后保持页面滚动条位置javascript
doublewang的专栏
08-25 2491
在一个很长的列表中进行操作，当用户触发PostBack事件的时候，需要保持滚动条所在位置。搜索了一下，发现有两种方法可以实现。第一种，在msdn中找到的，设置Page的SmartNavigation（智能导航）属性为True。原文的备注是这样说的： 在大多数情况下不要在代码中设置该属性。在 .aspx 文件的 @ Page 指令中将 SmartNavigation 属性设置为 true。请求该页
当页面有position:fixed的悬浮菜单时，如何调整锚定位的时候不被悬浮菜单挡住？
n1z1lam的专栏
04-24 4675
function locateAt(e){ e = document.getElementById(e);/*以id命名的锚点*/ y = e.offsetTop; while(e=e.offsetParent){ y += e.offsetTop;} y-=65;/*悬浮菜单的高度*/ window.scrollTo(0,y); }
JavaScript代码兼容IE与Firefox技巧解析
"这篇文章主要探讨了如何在JavaScript中编写兼容IE和Firefox的代码，特别是针对事件处理和坐标获取的差异进行了解释和示例演示。" 在开发网页时，JavaScript的兼容性问题一直是一个挑战，尤其是针对不同浏览器的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值