编程 Javascript

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

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 相关文章推荐

[原创]静态页面也可以实现预览列表不同的显示方式

Oct 14 Javascript

JavaScript的面向对象方法以及差别

Mar 31 Javascript

JavaScript 格式字符串的应用

Mar 29 Javascript

最短的IE判断代码

Mar 13 Javascript

js 点击页面其他地方关闭弹出层(示例代码)

Dec 24 Javascript

Javascript 运动中Offset的bug解决方案

Dec 24 Javascript

JavaScript随机生成颜色的方法

Oct 15 Javascript

Axios学习笔记之使用方法教程

Jul 21 Javascript

详解基于Angular4+ server render(服务端渲染)开发教程

Aug 28 Javascript

浅谈vuejs实现数据驱动视图原理

Feb 23 Javascript

在项目vue中使用echarts的操作步骤

Sep 07 Javascript

JavaScript控制台的更多功能

Apr 28 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+mysql分页代码详解

2008/03/27 PHP

php 删除一个数组中的某个值.兼容多维数组!

2012/02/18 PHP

php使用pdo连接并查询sql数据库的方法

2014/12/24 PHP

Yii 2中的load()和save()示例详解

2017/08/03 PHP

ThinkPHP3.2.3框架邮件发送功能图文实例详解

2019/04/23 PHP

jQuery select操作控制方法小结

2010/05/26 Javascript

解决jquery异步按一定的时间间隔刷新问题

2012/12/10 Javascript

JavaScript将数据转换成整数的方法

2014/01/04 Javascript

jquery和js实现对div的隐藏和显示方法

2014/09/26 Javascript

在AngularJS应用中实现一些动画效果的代码

2015/06/18 Javascript

JS简单限制textarea内输入字符数量的方法

2015/10/14 Javascript

JS控制弹出悬浮窗口(一览画面)的实例代码

2016/05/30 Javascript

axios+Vue实现上传文件显示进度功能

2019/04/14 Javascript

Vue 实例事件简单示例

2019/09/19 Javascript

vue移动端使用appClound拉起支付宝支付的实现方法

2019/11/21 Javascript

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2020/05/19 Javascript

微信小程序学习总结（三）条件、模板、文件引用实例分析

2020/06/04 Javascript

Windows下用py2exe将Python程序打包成exe程序的教程

2015/04/08 Python

Python绘制七段数码管实例代码

2017/12/20 Python

对python过滤器和lambda函数的用法详解

2019/01/21 Python

Pytorch实现将模型的所有参数的梯度清0

2020/06/24 Python

英国精品买手店：Browns Fashion

2016/09/29 全球购物

Myprotein瑞士官方网站：运动营养和健身网上商店

2019/09/25 全球购物

早餐连锁店计划书

2014/01/08 职场文书

母亲七十大寿答谢词

2014/01/18 职场文书

电力公司个人求职信范文

2014/02/04 职场文书

国际贸易专业求职信

2014/06/04 职场文书

党代会心得体会

2014/09/04 职场文书

公司授权委托书范文

2014/09/21 职场文书

自荐信格式范文

2015/03/04 职场文书

付款证明模板

2015/06/19 职场文书

什么是求职信？求职信应包含哪些内容？

2019/08/14 职场文书

Python基础之hashlib模块详解

2021/05/06 Python

详解Node.js如何处理ES6模块

2021/05/15 Javascript

教你怎么用Python操作MySql数据库

2021/05/31 Python

MySQL分区表管理命令汇总

2022/03/21 MySQL