<!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:;padding:;}
body{font-family:"微軟雅黑", Arial, Helvetica, sans-serif;color:#333333;line-height:px;font-size:px;}
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:;}
/*網站頭部*/
.col960{width:px;margin:auto;}
.navbg{height:px;width:%;background:#08A5E0;box-shadow:px px px #999;position:absolute;z-index:;left:;}
#navul li{float:left;margin-right:px;width:px;height:px;position:relative;text-align:center;line-height:px;}
#navul li.navhome{text-align:left;padding: px px;width:px;}
#navul li a:link, #navul li a:visited{color:#FFFFFF;}
#navul li ul{display:none;position:absolute;z-index:;top:px;left:-px;background:#006D96;border:#004E6C px solid;border-bottom:none;}
#navul li ul li{display:block;width:px;float:none;margin-right:px;height:px;position:relative;line-height:px;border-bottom:#004E6C px solid;font-size:px;}
#navul li.navmoon{background:#006D96;border:#004E6C px solid;width:px;height:px;line-height:px;}
#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:px;height:px;line-height:px;}
#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:
});
} 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 : ,
top:
};
})(jQuery);
</script>
</body>
</html>
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)