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


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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
查找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 飞信好友免费短信API接口开源版
2010/07/22 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
python下10个简单实例代码
2017/11/15 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python微信撤回监测代码
2019/04/29 Python
详解Python的三种可变参数
2019/05/08 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
党员个人自我剖析材料
2014/10/08 职场文书
个人合伙协议书范本
2014/10/14 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
关爱空巢老人感想
2015/08/11 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript