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复选框CHECKBOX全选、反选
Aug 30 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
自定义刻度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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
Bootstrap基础学习
2015/06/16 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
vue.js数据绑定操作详解
2018/04/23 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python动态加载变量示例分享
2014/02/17 Python
python实现图片批量剪切示例
2014/03/25 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
学校证明范文
2015/06/24 职场文书
数学备课组工作总结
2015/08/12 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript