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


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 分页控件实现代码
Nov 30 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
js表单验证实例讲解
Mar 31 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
微信小程序实现日历小功能
Nov 18 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图片上传代码
2013/11/04 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
node.js遍历目录的方法示例
2018/08/01 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
JQuery获得内容和属性方法解析
2020/05/30 jQuery
jQuery实现查看图片功能
2020/12/01 jQuery
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python调用新浪微博API项目实践
2014/07/28 Python
详解Python发送邮件实例
2016/01/10 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
应届毕业生应聘自荐信
2013/12/07 职场文书
执行力心得体会
2013/12/31 职场文书
老同学聚会感言
2014/02/23 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis