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

最新推荐文章于 2023-08-24 15:11:27 发布
原创 最新推荐文章于 2023-08-24 15:11:27 发布 · 6k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#firefox #chrome #ie #function #xhtml
#div
本文介绍了一种使用JavaScript实现的网页菜单栏固定效果的方法。当页面滚动到一定位置时，菜单栏会固定在屏幕顶部，便于用户浏览。文中通过监听滚动事件并获取页面滚动距离来判断是否需要将菜单栏定位为固定。 
<!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.onscroll=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.onload=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>


div模块层随页面滚动遇顶固定的两种方法(js&jQuery)
10-29
一、遇顶固定的例子 我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条，在默认状态时，该工具条是跟随页面滚动的，如下图： 而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当我们下拉屏幕浏览最新微博时，工具条也会出现这个效果，如下图： 这个效果看上去方便，贴心，也许还带推动广告的促销呢。原理其实很简单，本文展示两种方法。 二、智能浮动效果的实现原理 它分两种状态，一是默认状态，二是浮动固顶状态。 默认状态就是默认状态，什么也不用做，保持原有的CSS就好。无论有没有对它做定位，做了absolute也好，没做也好，都行。 关键是当浏览器屏幕滚动时，该对象div层要移除浏览器界面视区的时候，是要修改它的position属性，让它浮动在窗口的上沿显示就行了。最好的position属性是fixed，可以在IE6+和其他浏览器浮动层平滑的固定定位，由于IE6老大哥不支持fixed属性，所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了，在微软公布不再修补更新XP漏洞，在中国360安全卫士的帮助下虽然大家仍然使用XP，但IE的用户已经是少之又少了。 那接下来，如何判断当前div层与浏览器窗口的上边缘接触了呢？遇到浏览器顶部了呢？ 当浮动层div与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度是一致的，所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢？ 这里则是使用javaScript库实现。
不随滚动条滚动的模式窗口
07-15
这是一个基于jquery的插件， 嗯 好用 。可以弹出页面 呵呵 又叫做thickbox
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
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
导航条随页面滚动自动置顶-兼容IE8和Chrome浏览器
zyytaiyame的博客
12-29 1406
导航条随页面滚动自动置顶 兼容IE8和Chrome浏览器主要核心JS代码如下：
使用js实现导航窗格在页面下拉以后固定在页面顶端
麻花猫耳朵的博客
09-28 2604
使用js实现导航窗格在页面下拉以后固定在页面顶端。 bootstrap中的组件可以实现导航栏固定在页面的最顶端，但是有些时候导航栏并不是在页面最顶端显示的，此时bootstrap组件就不适用了。经过多次测试，最终得到了这种简便方法，留存下来以便不时之需，也可以适时拿出来显摆一下，哈哈哈。。。 话不多说，直接上代码： 首先是HTML部分，当然要留出来第一个div，用来放一些标题之类的内容，随后就是导航栏，此处的container是bootstrap的栅格布局，懂的人自然懂，不懂也没关系，containe
html 滚动条置顶,css怎么设置网页下拉条（滚动条）样式？
weixin_42314737的博客
05-30 1389
很多朋友在网页设计中要自定义下拉条(滚动条)样式的情景，下拉条的样式我们可以通过css来控制的，下拉条能不能换颜色或者做的更好看一些呢？那么滚动条的设置都有哪些呢？下面本篇文章来介绍一下设置下拉条(滚动条)的方法。下拉条(滚动条)的设置在CSS中不能简简单单就完成，必竟它是由好多部分组成。所以我们如果想要设置滚动条就要先知道哪些是控制哪些部分的。下面一一介绍：scrollbar-face-colo...
bing搜索自动滚动到顶端和隐藏搜索页小冰的一个办法
08-24 1577
这小冰，不知道从哪天起，就智障了。翻来覆去一句话 “我已经开始升级啦，期待一下吧！左上角的关闭也是形同虚设。关掉之后下次搜索又会出来，令人抓狂。插件的安装教程见上面链接。然后安装回答里面的脚本，代码也贴在下面了。这也是个奇葩问题，问题描述和解决办法这位博主讲的很详细了。也是用的油猴，贴出他的代码。bing搜索在点击某个搜索结果跳到标签页后再切换回来，有时候页面会滚回到顶部。可以在上面的脚本里继续追加，也可以新建一个。用了一个笨方法，检索到小冰后隐藏。
页面滚动时固定菜单栏
chenzhao635的专栏
03-19 130
往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox) 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 4...
C#开发之——MenuStrip(12.20)
我的博客
07-30 3311
一 概述 MenuStrip是Windows窗体中的菜单栏控件，直接按住MenuStrip不放，将其拖到Windows窗体中即可 <!--more--> 二 实例 在Windows窗体中创建MenuStrip菜单 2.1 页面布局 将MenuStrip控件拖拽到Windows窗体中 2.2 MenuStrip菜单添加 完成MenuStrip控件的添加后，在Windows窗体设计页面中就能看到"请在此处输入"选项，直接单击它，然后输入菜单的名称，例如："文件".
固定下拉列表
weixin_44779945的博客
08-04 514
选择下拉框时，再去滚动页面，下拉框会fix在窗口上，也会遮挡住页面内容，解决方法: 在Select 标签加个getPopupContainer属性，如下图所示 <Select onChange={chooseRoom} placeholder="请选择仓储位房间" allowClear getPopupContainer={(triggerNode) => tri
Javascript实现滚动条下拉时,侧边栏固定的实现
weixin_30301183的博客
12-20 536
一般博客侧边栏高度小于主体内容区时，滚动条滚动到到侧边栏底部时，侧边栏固定。 JavaScript代码如下： 1 $.fn.scrollFix = function (opt) { 2 var defaults = { 3 baseTop: 50, // 初始top值 4 main: ".main" // 主体区选择器 ...
怎样使左侧菜单栏不随滚动条滚动
yulongkuke的博客
07-27 5043
怎样使左侧菜单栏不随滚动条滚动
菜单固定 页面滚动 效果
yuan_jie
11-27 2074
在一个单页面设置一个主菜单，当页面滚动时主菜单位置固定在页面窗口中不动，或左或右，或上或下。当单击菜单项时，页面滚动到菜单对应的内容区，当页面滚动到预定内容位置时，对应的菜单项变为当前选中样式。 此效果可以应用在一些内容比较长的单页设计，本文将介绍使用JjQuery和css来实现这一效果，demo中分别有菜单居左、居右及底部效果，点击demo看效果： 查看演示DEMO下载源码
使用fullpage.js实现全屏滚动经验以及踩的坑
胡小念
01-12 1万+
全屏滑动一般用在官方网站使用较多这种效果，有很多插件可以实现这种效果，像swiper,fullpage,iscroll等。鉴于fullpage没用过，所以就选择它进行尝试一下。 首先在网上搜索fullpage.js，会搜出一大堆相关博客，看了之后发现还是很简单的。html中的结构就是 div id="fullpage"> div class="section">第一屏div>
Dreamweaver中如何格式化代码
Senton
06-17 1万+
Dreamweaver本身带有自动整理的功能!首先在[编辑]|[首先参数]的"代码格式"中设置好格式: 第一行:勾选.可以选择使用Tab键或空格键填补缩进.第二行:Tab键所占空位.这个只在DreamWeaver中有影响.不管你设为几,在文件中,一个Tab键还是一个Tab键.第三行:是否自动换行.不选.第四行:换行符类型.(Windows)第五、六、七行:标签大小写.第八行:TD后无换
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值