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

原创 2012年03月12日 08:59:55
<!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>


页面滚动条移到左侧

方法很简单,需要用到的就是dir属性 意思是:文本方向从左到右! 弊端是:有标点的情况下,标点会移到文字前面。 上面的效果是dir设成rtl的效果。 设成ltr时文字会跑到右侧,需要给...
  • zhangbw2016
  • zhangbw2016
  • 2017年06月20日 10:45
  • 254

如何让页面出现 一个下来滚动条不动的模块

如何让页面出现 一个下来滚动条不懂的模块
  • hfmbook
  • hfmbook
  • 2013年12月16日 11:05
  • 2121

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

>   html xmlns="http://www.w3.org/1999/xhtml">     head>       meta http-equiv="Content-Type" con...
  • u012248761
  • u012248761
  • 2016年04月11日 14:21
  • 275

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色。但是css...
  • wswq1125
  • wswq1125
  • 2017年01月06日 08:39
  • 445

因滚动条出现而导致页面晃动的解决方案

这两天因为oa主页为了消除晃动的影响给body下的div加了一个{min-height:960},可是产品对底部出现的大片空白不满意,而且如果换了超大屏幕这个最小高度还是会出问题,最后去网上百度了这么...
  • sinat_23668639
  • sinat_23668639
  • 2015年10月29日 12:01
  • 2494

HTML中滚动条滚动时如何让上面的标题固定不动

在做web前端开发时,有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的,通过在不同的节点设置overflow就很容易实现。 但是有时候一开始的层次结构设...
  • Quincylk
  • Quincylk
  • 2016年10月20日 15:47
  • 7814

selenium之 兼容所有浏览器滚动条滚动的js

很多人发现写的js操作滚动条的代码只能控制firefox的滚动条,而chrome则不吊你;好不容易chrome能动了,firefox又不理你了。简直是坑的一比。那有没有兼容firefox、chrome...
  • huilan_same
  • huilan_same
  • 2016年08月31日 17:27
  • 3635

固定层不随滚动条滚动而滚动(纯CSS,兼容IE6,IE7,IE8,Firefox,Safari)

使用CSS来固定层,此层不随滚动条滚动而滚动,固定层分三个位置: 页面顶端:   页面中央:   页面底层:     StaticContent.css文件: /****...
  • lovegonghui
  • lovegonghui
  • 2015年11月03日 17:02
  • 324

解决页面滚动条出现和消失的过程页面会横向移动的问题

平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动...
  • zifeiyu130
  • zifeiyu130
  • 2018年01月10日 18:55
  • 103

页面出现滚动条后会左移的处理方法

想了很久没解决 原来只要一句话 在body中加入样式 overflow-y:scroll 强制滚动条一直出现即可...
  • jewely
  • jewely
  • 2015年02月12日 22:49
  • 620
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)
举报原因:
原因补充:

(最多只允许输入30个字)