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


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 通用三级联动下拉列表
Apr 19 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
解决vue attr取不到属性值的问题
Sep 18 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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 date()日期时间函数详解
2010/05/16 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
ThinkPHP之getField详解
2014/06/20 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Javascript 类型转换方法
2010/10/24 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
详解Python中的正则表达式
2018/07/08 Python
Python WEB应用部署的实现方法
2019/01/02 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
机械设计及其自动化求职推荐信
2014/02/17 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android