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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
学习javascript文件加载优化
Feb 19 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
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代码
2012/09/14 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
小程序实现分类页
2019/07/12 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Element MessageBox弹框的具体使用
2020/07/27 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Scrapy的简单使用教程
2017/10/24 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python 一句话生成字母表的方法
2019/01/02 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
pandas计数 value_counts()的使用
2019/06/24 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python math模块的基本使用教程
2021/01/16 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
网络安全方面的面试题
2016/01/07 面试题
会计实习自我鉴定
2013/12/04 职场文书
音乐专业自荐信
2014/02/07 职场文书
转让协议书
2015/01/27 职场文书
人口与计划生育责任书
2015/05/09 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书