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 相关文章推荐
javascript面向对象快速入门实例
Jan 13 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
jquery拖动改变div大小
Jul 04 jQuery
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
小程序自定义弹框效果
Nov 16 Javascript
原生js实现弹幕效果
Nov 29 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
玩转虚拟域名◎+ .
2006/10/09 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php获取汉字首字母的函数
2013/11/07 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
比较基础的php面试题及答案-编程题
2012/10/14 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
分公司经理岗位职责
2013/11/11 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL