导航跟随滚动条置顶移动示例代码


Posted in Javascript onSeptember 11, 2013
#topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> 
jQuery(document).ready(function() { 
var topmenu = jQuery("#topmenu"); 
var topmenu_top = topmenu.offset().top; 
reset_topmenu_top(topmenu, topmenu_top); 
jQuery(window).scroll(function() { 
reset_topmenu_top(topmenu, topmenu_top); 
}); 
}); 
function reset_topmenu_top(topmenu, topmenu_top) { 
var document_scroll_top = jQuery(document).scrollTop(); 
if (document_scroll_top > topmenu_top) { 
topmenu.css('top', document_scroll_top); 
} 
if (document_scroll_top <= topmenu_top) { 
topmenu.css('top', topmenu_top); 
} 
} 
</script>

效果图如下:
导航跟随滚动条置顶移动示例代码
Javascript 相关文章推荐
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
查找iframe里元素的方法可传参
Sep 11 #Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 #Javascript
$.get获取一个文件的内容示例代码
Sep 11 #Javascript
JQuery触发事件例如click
Sep 11 #Javascript
自动设置iframe大小的jQuery代码
Sep 11 #Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 #Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
php中filter_input函数用法分析
2014/11/15 PHP
深入php内核之php in array
2015/11/10 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python基础教程项目四之新闻聚合
2018/04/02 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python 切换root 执行命令的方法
2019/01/19 Python
python实现列表的排序方法分享
2019/07/01 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
有个性的自我评价范文
2013/11/15 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
思想道德自我评价2015
2015/03/09 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript