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


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编程开发中的五个实用小技巧
Jul 22 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
JS如何生成动态列表
Sep 22 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python出现segfault错误解决方法
2016/04/16 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
金融行业务员的自我评价
2013/12/13 职场文书
就业协议书范本
2014/04/11 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
保安辞职信范文
2015/02/28 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
pandas中关于apply+lambda的应用
2022/02/28 Python