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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
自定义刻度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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
d3.js实现图形缩放平移
2019/12/19 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中的迭代器漫谈
2015/02/03 Python
python xml解析实例详解
2016/11/14 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
numpy 声明空数组详解
2019/12/05 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
好人好事事迹材料
2014/02/12 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python