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


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为搜索栏增加tag提示
Jun 22 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于JavaScript获取url参数2种方法
Apr 17 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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
xml+php动态载入与分页
2006/10/09 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
php压缩文件夹最新版
2018/07/18 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
Python对文件操作知识汇总
2016/05/15 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python 基于wx实现音乐播放
2020/11/24 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
祖国在我心中演讲稿
2014/01/15 职场文书
科研课题实施方案
2014/03/18 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
户外活动总结
2015/02/04 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Python数据结构之队列详解
2022/03/21 Python
Python中time标准库的使用教程
2022/04/13 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python