<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网友分享jQuery导航菜单悬浮置顶特效</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,255,0.60); color:#333;}
a{color:#fff; text-decoration:none;}
#header{display:block; height:200px; background:#7fcddd; line-height:100px; text-align:center; color:#fff; font-size:16px;text-shadow:0px -1px 0px rgba(30,30,30,0.60);}
#header h3{font-size:50px; font-weight:600;height:120px; line-height:120px;}
#header h4{ font-size:18px; font-weight:600; height:80px; line-height:80px;}
#box{ width:980px; margin:60px auto; height:2600px; background:#eee;}
#mynav{ width:100%; height:40px; background:#2093e0; border-bottom:1px solid #fff; position:relative; z-index:99; color:#fff; line-height:40px;}
#mynav ul{width:1000px; padding:0; margin:0 auto; list-style-type:none;}
#mynav ul li{ float:left; margin：0px 5px; border-right:1px solid #fff;}
#mynav ul li a{ display:block; padding:0px 20px; height:40px; line-height:40px; color:#fff; text-shadow:0px -1px 0px rgba(30,30,30,0.60);}
</style>
</head>
<body>
<div id="header">
<h3>置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部</h3>
<h4> <a href="http://www.js-css.cn" target="_blank">http://www.js-css.cn</a></h4>
</div>
<div id="mynav">
<ul>
<li><a href="#" target="_blank">JS代码网</a></li>
<li><a href="#" target="_blank">开源框架</a></li>
<li><a href="#" target="_blank">jQuery教程</a></li>
<li><a href="#" target="_blank">JS代码大全</a></li>
<li><a href="#" target="_blank">资源工具</a></li>
<li><a href="#" target="_blank">用户体验</a></li>
<li><a href="#" target="_blank">HTML5</a></li>
<li><a href="#" target="_blank">CSS3</a></li>
<li><a href="#" target="_blank">开发手册</a></li>
</ul>
</div>
<div id="box">
<p>使用方式：</p>
$(document).ready(function(e) { <br/>
$('#mynav').navfix(0,999); <br/>
});<br/>
//第一个值： 你期望导航在距离顶部多少的位置浮动<br/>
//第二个值： 导航zindex<br/>
</div>
<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
<!-- <script type="text/javascript" src="js/navfix.js"></script> -->
<script type="text/javascript">
$(document).ready(function(e) {
$('#mynav').navfix(0,999);
});
//第一个值： 你期望导航在距离顶部多少的位置浮动
//第二个值： 导航zindex
</script>
</body>
</html>
<script type="text/javascript">
;(function($){$.fn.navfix=function(mtop,zindex){var nav=$(this),mtop=mtop,zindex=zindex,dftop=nav.offset().top-$(window).scrollTop(),dfleft=nav.offset().left-$(window).scrollLeft(),dfcss=new Array;dfcss[0]=nav.css("position"),dfcss[1]=nav.css("top"),dfcss[2]=nav.css("left"),dfcss[3]=nav.css("zindex"),$(window).scroll(function(e){$(this).scrollTop()>dftop?$.browser.msie&&$.browser.version=="6.0"?nav.css({position:"absolute",top:eval(document.documentElement.scrollTop),left:dfleft,"z-index":zindex}):nav.css({position:"fixed",top:mtop+"px",left:dfleft,"z-index":zindex}):nav.css({position:dfcss[0],top:dfcss[1],left:dfcss[2],"z-index":dfcss[3]})})}})(jQuery)
</script>
扫一扫
4068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
