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


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同时提交多个Web表单的方法
Dec 26 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
人事主管的岗位职责
2013/11/16 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
财务检查整改报告
2014/11/06 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2015年母亲节寄语
2015/03/23 职场文书
工程款申请报告
2015/05/15 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
订货会主持词
2015/07/01 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL