您的位置：首页 > Web前端 > JQuery

jQuery滚动顶部定位导航

2015-09-01 14:24 721 查看 
<!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>jQuery滚动顶部定位导航</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<style type="text/css">
body, div, ul, li{margin:0;padding:0;}
body{font-family:"微软雅黑", Arial, Helvetica, sans-serif;color:#333333;line-height:25px;font-size:14px;}
a:link, a:visited{text-decoration:none;color:#333333;}
a:hover{text-decoration:underline;color:#08A5E0;text-decoration:none;}
ul, ul li{list-style-type:none;}
.cl{zoom:1;}
/*网站头部*/
.col960{width:960px;margin:auto;}
.navbg{height:40px;width:100%;background:#08A5E0;box-shadow:1px 1px 7px #999;position:absolute;z-index:99;left:0;}
#navul li{float:left;margin-right:1px;width:100px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li.navhome{text-align:left;padding:0 0px 0 40px;width:60px;}
#navul li a:link, #navul li a:visited{color:#FFFFFF;}
#navul li ul{display:none;position:absolute;z-index:10000;top:38px;left:-1px;background:#006D96;border:#004E6C 1px solid;border-bottom:none;}
#navul li ul li{display:block;width:98px;float:none;margin-right:0px;height:28px;position:relative;line-height:28px;border-bottom:#004E6C 1px solid;font-size:12px;}
#navul li.navmoon{background:#006D96;border:#004E6C 1px solid;width:98px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#FFFFFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:98px;height:28px;line-height:28px;}
#navul li.navmoon ul a:hover{background:#000000;}
</style>

</head>
<body style="height:1800px;">

<br />
<br />
<br />
<br />
<br />

<div class="navbg">
<div class="col960">
<ul id="navul" class="cl">
<li class="navhome"><a href="#">HOME</a></li>
<li>
<a href="#">Html</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS入门</a></li>
<li><a href="#">CSS工具</a></li>
<li><a href="#">CSS技巧</a></li>
<li><a href="#">CSS实例</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">CSS hack</a></li>
<li><a href="#">CSS2.0 手册</a></li>
</ul>
</li>
<li>
<a href="#">网页特效</a>
<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>
<li><a href="#">文字特效</a></li>
<li><a href="#">时间日期</a></li>
<li><a href="#">窗口特效</a></li>
<li><a href="#">鼠标特效</a></li>
</ul>
</li>
<li>
<a href="#">前端资讯</a>
<ul>
<li><a href="#">用户体验</a></li>
<li><a href="#">前端观察</a></li>
<li><a href="#">职业生涯</a></li>
</ul>
</li>
<li>
<a href="#">前端技巧</a>
<ul>
<li><a href="#">布局技巧</a></li>
<li><a href="#">网页字体</a></li>
<li><a href="#">flash</a></li>
</ul>
</li>
<li>
<a href="#">杂七杂八</a>
<ul>
<li><a href="#">帝国cms</a></li>
<li><a href="#">电脑技巧</a></li>
<li><a href="#">随笔杂谈</a></li>
</ul>
</li>
<li>
<a href="#">Javascript</a>
<ul>
<li><a href="#">Jquery</a></li>
<li><a href="#">Js学习</a></li>
<li><a href="#">Js教程</a></li>
</ul>
</li>
<li>
<a href="#">网站优化</a>
<ul>
<li><a href="#">SEO杂谈</a></li>
<li><a href="#">站长工具</a></li>
<li><a href="#">经验分享</a></li>
</ul>
</li>
</ul>
</div>
</div>

<script  type="text/javascript">
$(document).ready(function(){

$(".navbg").capacityFixed();

$("#navul > li").not(".navhome").hover(function(){
$(this).addClass("navmoon");
},function(){
$(this).removeClass("navmoon");
});

});

(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element) {
var top = opts.top;
element.css({
"top":top
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {

if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 0,
top:95
};
})(jQuery);

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 导航
相关文章推荐
新的分享
章节导航