jQuery实现网页顶部固定导航效果代码
更新时间：2015年12月24日 11:42:08 作者：cui_angel
这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
锋利的jQuery 要点归纳（二）上 jQuery中的DOM操作，需要的朋友可以参考下。2010-03-03
用类作为选择符虽然效率低点但是 可以多次重用 这个性质不错2010-04-04
jQuery+css3实现转动的正方形效果(附demo源码下载)
这篇文章主要介绍了jQuery+css3实现转动的正方形效果,可实现图片组集体转动的功能,通过jQuery结合时间函数定时操作css3属性实现旋转效果,并附带demo源码供读者下载,需要的朋友可以参考下2016-01-01
本篇文章主要是对jquery ajax,ashx,json的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
今日闲来无事，把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能（代码基于jquery运行：http://jquery.com/） 。由于对Ajax技术的认识还只是在初级阶段，总觉得这么些有点别扭，希望大虾能够指点一二。2008-11-11
jQuery中$.ajax()和$.getJson()同步处理详解
这篇文章主要介绍了jQuery中$.ajax()和$.getJson()同步处理详解的相关资料，非常的细致全面，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了jquery图片轮播插件，仿支付宝2013版全屏图片幻灯片功能,需要的朋友可以参考下2014-04-04
Jquery下EasyUI组件中的DataGrid结果集清空方法
要求选择“地区”及“代维公司”后，刷新第一个DataGrid框体，下面为大家介绍下如何清空Jquery下EasyUI组件中的DataGrid结果集2014-01-01
用JavaScript手动实现动画效果，需要编写非常复杂的代码。下面给分享jQuery内置的几种动画样式，需要的朋友参考下吧2017-07-07
下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论