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 相关文章推荐
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 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/04/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
javascript 必知必会之closure
2009/09/21 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python守护进程用法实例分析
2015/06/04 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
简单了解python变量的作用域
2019/07/30 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
应届生面试求职信
2014/07/02 职场文书
撤诉申请怎么写
2015/05/19 职场文书
中秋节主题班会
2015/08/14 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis