javascript改变position值实现菜单滚动至顶部后固定
更新时间：2013年01月18日 18:22:13 作者：
现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部;该效果在 ie6 下不支持，因为ie6不支持 position:fixed,效果很不错，感兴趣的朋友可以了解下啊
现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
.header{height:150px;}
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav">
<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
<a href="#">55555</a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="menuFixed.js"></script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
</script>
menuFixed.js 代码：
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}
最后需要说明的是，该效果在 ie6 下不支持，因为 ie6 不支持 position:fixed;
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。
html 代码：
复制代码 代码如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
.header{height:150px;}
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav">
<a href="#">11111</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
<a href="#">55555</a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="menuFixed.js"></script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
</script>
menuFixed.js 代码：
复制代码 代码如下:
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}
最后需要说明的是，该效果在 ie6 下不支持，因为 ie6 不支持 position:fixed;
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现弹性导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
JavaScript中出现了一个以前没学过的概念——闭包。何为闭包？从表面理解即封闭的包，与作用域有关。所以，说闭包以前先说说作用域2012-06-06
这篇文章主要介绍了JavaScript中对象介绍,本文直接用实例讲解对象的创建、删除等操作,并总结了Object属性、Property属性,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了关于如何通过一次报错详细谈谈Point事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2018-05-05
下面小编就为大家带来一篇JS中BOM相关知识点总结(必看篇)。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-11-11
这篇文章主要介绍了微信小程序的部署方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了在Google 地图上实现做的标记相连接,需要的朋友可以参考下2015-01-01
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识，主要对比说明在Bootstrap开发中用到的这些技术要点，对此文感兴趣的朋友一起学习吧2016-05-05
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
jq的extend()方法能很方便的实现扩展对象方法，这里要实现的是：原生js实现复制对象，扩展对象，类似jq中的extend()方法,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了js防止DIV布局滚动时闪动的解决方法,通过js的window.requestAnimationFrame来解决这一问题,非常具有实用价值,需要的朋友可以参考下2014-10-10
最新评论