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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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应用提速面面观
2006/10/09 PHP
一些常用的php简单命令代码集锦
2007/09/24 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
js改变文章字体大小的实例代码
2013/11/27 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python默认参数调用方法解析
2020/02/09 Python
Python程序慢的重要原因
2020/09/04 Python
会计专业应届生自荐信
2014/06/28 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
见习报告的格式
2014/11/04 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
单位提档介绍信
2015/10/22 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL