jQuery实现固定在网页顶部的菜单效果代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏览器顶部的距离,滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定。

运行效果截图如下:

jQuery实现固定在网页顶部的菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定在顶部的菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){ 
 //获取要定位元素距离浏览器顶部的距离
 var navH = $(".nav").offset().top;
 //滚动条事件
 $(window).scroll(function(){
  //获取滚动条的滑动距离
  var scroH = $(this).scrollTop();
  //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
  if(scroH>=navH){
   $(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
  }else if(scroH<navH){
   $(".nav").css({"position":"static","margin":"0 auto"});
  }
  console.log(scroH==navH);
 })
})
</script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.top{
 height:900px;
 background:#009999;
 }
.nav{
 width:400px;
 margin:0 auto;
 border-bottom:1px solid #F00;
 }
.nav ul:after{
 clear:both;
 content:"";
 display:table;}
.nav ul li{
 background:#FFFFFF;
 float:left;
 width:70px;
 border:2px solid #06F;
 text-align:center;
 height:28px;
 line-height:28px;
 list-style:none;} 
.cl01,.cl02,.cl03,.cl04,.cl05,.cl06,.cl07,.cl08{
 height:300px;} 
.cl01{
 background:#333;} 
.cl02{
 background:#F00;}
.cl03{
 background:#FFFF00;} 
.cl04{
 background:#0FF;} 
.cl05{
 background:#030;}
.cl06{
 background:#006699;}
.cl07{
 background:#930;}
.cl08{
 background:#969;}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav">
 <ul>
  <li>测试1</li>
  <li>测试2</li>
  <li>测试3</li>
  <li>测试4</li>
 </ul>
</div>
<div class="cl01"></div>
<div class="cl02"></div>
<div class="cl03"></div>
<div class="cl04"></div>
<div class="cl05"></div>
<div class="cl06"></div>
<div class="cl07"></div>
<div class="cl08"></div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
自定义刻度jQuery进度条及插件
Sep 02 #Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
jQuery的一些注意
2006/12/06 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python访问纯真IP数据库的代码
2011/05/19 Python
python复制与引用用法分析
2015/04/08 Python
深入解析Python中的WSGI接口
2015/05/11 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python用for循环实现九九乘法表
2018/05/31 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python验证身份证信息实例代码
2019/05/06 Python
python基于opencv检测程序运行效率
2019/12/28 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
高级方案规划工程师岗位职责
2013/11/29 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
药店主任岗位责任制
2014/02/10 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
教师年度个人总结
2015/02/11 职场文书
个人维稳承诺书
2015/05/04 职场文书
php字符串倒叙
2021/04/01 PHP
Golang之sync.Pool使用详解
2021/05/06 Golang
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android