jQuery实现网页顶部固定导航效果代码


Posted in Javascript onDecember 24, 2015

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

运行效果截图如下:

jQuery实现网页顶部固定导航效果代码

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
$(function(){
  $("#wrap ul li ").css("width",760 / $("#wrap ul li").size());
  $(window).scroll(function(){
  var h = $(this).scrollTop()+2;
  $("#wrap").css("top",h);
  });
  $("#wrap ul li:even").css("background","#ddd")
  $("#wrap ul li").hover(function(){$(this).css("background","#0f0");},function(){$(this).css("background","");});
});
</script>
<style type="text/css">
#wrap{position:absolute; top:2px; left:0px; width:100%; height:20px; background:#f00;}
#wrap ul{list-style:none; width:760px; margin:0 auto; padding:0; background:#fff;}
#wrap ul li{float: left; text-align:center;}
#test{height:2000px; background:#f0f; margin:0; padding:0; border:1px solid black;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<Li>首页</Li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
<li>图片</li>
<li>新闻</li>
<li>软件</li>
</ul>
</div><div id="test"></div>
</body>
</html>

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

Javascript 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js 上传图片预览问题
Dec 06 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 #Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 #Javascript
jquery遍历函数siblings()用法实例
Dec 24 #Javascript
jQuery中的siblings用法实例分析
Dec 24 #Javascript
JQuery标签页效果实例详解
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python构建XML树结构的方法示例
2017/06/30 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
浅析Python requests 模块
2020/10/09 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
应届生财务管理求职信
2013/11/06 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
读书活动总结
2014/04/28 职场文书
投资意向书
2014/07/30 职场文书
团拜会主持词
2015/07/04 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技