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 相关文章推荐
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jQuery中extend函数详解
Feb 13 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue+element UI实现树形表格
Dec 29 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP5+UTF8多文件上传类
2008/10/17 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
javascript String 对象
2008/04/25 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
对python的文件内注释 help注释方法
2018/05/23 Python
flask入门之表单的实现
2018/07/18 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 下划线的不同用法
2020/10/24 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
最新大学生自我评价
2013/09/24 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
毕业生应聘求职信
2014/07/10 职场文书
安全例会汇报材料
2014/08/23 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
react中的DOM操作实现
2021/06/30 Javascript
Python制作动态字符画的源码
2021/08/04 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL