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="/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="smohan.fixednav.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.mainavi').smohanfixednav(0,999);
});
</script>

  

1、(0,999)兩個數值,第一個一個是設置在滾動時導航欄與頂部的距離,第二個是導航欄的zindex

2、mainavi 為導航欄的class


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM