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


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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
基于Vant UI框架实现时间段选择器
Dec 24 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 变量定义和变量替换的方法
2009/07/30 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
jQuery使用方法
2017/02/04 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python魔法方法详解
2019/02/13 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
辞旧迎新演讲稿
2014/09/15 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
李白故里导游词
2015/02/12 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
使用Python拟合函数曲线
2022/04/14 Python