往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本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>


相关文章推荐

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

>   html xmlns="http://www.w3.org/1999/xhtml">     head>       meta http-equiv="Content-Type" con...

左侧菜单栏,页面滚动定位

  • 2017年06月02日 11:48
  • 3KB
  • 下载

CSS固定层-不随滚动条滚动.htm

  • 2009年09月30日 14:39
  • 3KB
  • 下载

页面滚动进度条 ( 兼容IE7及以上 )

这是IE的预览效果,打开的是IE7的文档模式直接粘代码,采用优雅降级的方式实现兼容。 demo 中用到的图片直接去百度下载就成,下大图效果好实现。1、*使用 jquery 的高版本实现 ...

固定菜单页面滚动效果

  • 2014年05月10日 09:50
  • 13KB
  • 下载

FireFox浏览器和 IE浏览器兼容问题 滤镜 DIV滚动条

IE与火狐浏览器兼容相关问题集锦,做网站的朋友可以参考下。 问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:...

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的...

css隐藏滚动条,兼容ie和chrome

隐藏滚动条

android页面滚动条

  • 2013年01月07日 14:56
  • 41KB
  • 下载

IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。

DTD已声明: IE document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)
举报原因:
原因补充:

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