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


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 中使用JSON的实现代码
Dec 01 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
查找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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php解析xml方法实例详解
2015/05/12 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python批量提取word内信息
2015/08/09 Python
python设计模式大全
2016/06/27 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python调用c++传递数组的实例
2019/02/13 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
PyTorch中的C++扩展实现
2020/04/02 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
市场专员岗位职责
2014/02/14 职场文书
廉洁使者实施方案
2014/03/29 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2014年社区工作总结
2014/11/18 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript