摘要：
最近用于创建模板的jquery插件固定在顶部，当网站导航滚动到当前可见页面的顶部时，它会随着窗口一起滚动。许多网站前台模板都有类似的效果。
最近在制作一个模版的时候用到的一个jquery插件，当网站导航滚动到当前可见页面顶部时，固定在顶部并随窗口滚动，有很多的网站前台模版有有类似的效果。
smohan.fixednav.js
/*
* 随滚动条固定导航到顶部插件
* autho:Smohan
* http://www.smohan.net
*/
;
(function ($) {
$.fn.smohanfixednav = function (mtop, zindex) {
var nav = $(this),
isIE6 = 'undefined' == typeof(document.body.style.maxHeight),
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 ? isIE6 ? 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)
注： 由于jquery的1.9 以上的版本，不再支持 $.browser 方法。所以将原有插件中判断是否是IE6 的语句 $.browser.msie&&$.browser.version=="6.0" 改为 'undefined' == typeof(document.body.style.maxHeight)
使用方法：
<script type="text/javascript" src="http://t.zoukankan.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://t.zoukankan.com/smohan.fixednav.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.mainavi').smohanfixednav(0,999);
});
</script>
1、(0,999)两个数值，第一个一个是设置在滚动时导航栏与顶部的距离，第二个是导航栏的zindex
2、mainavi 为导航栏的class