javascript改变position值实现菜单滚动至顶部后固定


Posted in Javascript onJanuary 18, 2013

现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 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 知识,随意写的一些效果。
Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 #Javascript
js replace正则表达式应用案例讲解
Jan 17 #Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 #Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 #Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 #Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python最基本的输入输出详解
2015/04/25 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python随机模块random使用方法详解
2020/02/14 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物