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


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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
关于JavaScript的一些看法
May 27 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
详解webpack打包vue时提取css
May 26 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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循环结构实例讲解
2014/02/10 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
简单的三步vuex入门
2018/05/20 Javascript
详解vue中组件参数
2018/07/09 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
详解python进行mp3格式判断
2016/12/23 Python
python用户管理系统
2018/03/13 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
高中生物教学反思
2014/02/05 职场文书
模具专业求职信
2014/06/26 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
公司保密管理制度
2015/08/04 职场文书