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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
js对象简介与基本用法示例
Mar 13 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获取地址栏信息的代码
2008/10/08 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python异常学习笔记
2015/02/03 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python接口开发实现步骤详解
2020/04/26 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python 获取计算机的网卡信息
2021/02/18 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
给导游的表扬信
2014/01/10 职场文书
创业女性典型材料
2014/05/02 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
升职感谢信
2015/01/22 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL