jquery导航固定菜单效果代码

分享一款jquery导航固定菜单效果,代码很简单,用了一个js里边的scroll,以下是代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航固定效果代码</title>
<style>
body { height:3000px; margin:0; padding:0;}
#nav { width:1000px; height:30px; background:#333; margin-left:50px; position:relative; top:50px;}
#nav ul { margin:0; padding:0; list-style:none;}
#nav ul li { width:100px; height:30px; float:left;}
#nav ul li a { display:block; width:100px; height:30px; line-height:30px; text-decoration:none; color:#fff; text-align:center; font-size:13px;}
#nav ul li a:hover { background:#f60;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
/*导航固定*/
$(window).scroll(function(){
//当滚动距离顶部50px时就固定,可自行更改
if ($(window).scrollTop()>50){
$("#nav").css({'position':'fixed','top':'0px','left':'0px'});
}
//到达顶部时恢复
else
{
$("#nav").css({'position':'absolute','top':'50px','left':'0px'});
}
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="##">网站首页</a></li>
<li><a href="##">网站首页</a></li>
<li><a href="##">网站首页</a></li>
<li><a href="##">网站首页</a></li>
<li><a href="##">网站首页</a></li>
</ul>
</div>
滚动一下试试效果
</body>
</html>

*web鱼承诺:本站所有资源代码免费下载,无病毒,无弹窗,无干扰链接,全都经过测试才发布的!给我建议

分享到:
标签:固定导航,导航,导航菜单,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

jquery导航固定菜单效果代码:目前有2 条留言

  1. 沙发
    就爱智能网92smart.com:

    顺藤摸瓜进来了,博主的个人头像霸气,放在IPHONE上更好~

    2013-08-06 下午 2:54
    • 谢谢,欢迎常来~!

      2013-08-06 下午 2:57