jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上

更新時(shí)間：2011年09月22日 19:38:25 作者：

經(jīng)常會(huì)遇到這樣的情況，當(dāng)頁面展示內(nèi)容過長時(shí)，想點(diǎn)導(dǎo)航切換欄目，就得把滾動(dòng)條拉回到頂上，這樣操作總不太人性化，能不能讓導(dǎo)航超出顯示范圍外時(shí)自動(dòng)貼在屏幕最頂上呢？答案肯定是能的。如果不太明白，把滾動(dòng)條拉到下面點(diǎn)，看下我博客是效果就明白了。

其實(shí)實(shí)現(xiàn)起來并不難，我們先把實(shí)現(xiàn)流程大致想一下，首先，如果導(dǎo)航在顯示范圍內(nèi)，就不用做修改。當(dāng)導(dǎo)航超出顯示范圍，也就是導(dǎo)航距離屏幕頂部的距離小于0的時(shí)候，我們要讓它浮動(dòng)在屏幕頂上，然后大于0的時(shí)候，進(jìn)行一個(gè)復(fù)原操作，原理就是這么簡(jiǎn)單，大致看下效果圖吧

復(fù)制代碼代碼如下:

 
$().ready(function(){ 
//導(dǎo)航距離屏幕頂部距離 
var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); 
//導(dǎo)航距離屏幕左側(cè)距離 
var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft(); 
//導(dǎo)航默認(rèn)樣式記錄，還原初始樣式時(shí)候需要 
var _position = $("#navigator").css('position'); 
var _top = $("#navigator").css('top'); 
var _left = $("#navigator").css('left'); 
var _zIndex = $("#navigator").css('z-index'); 
//鼠標(biāo)滾動(dòng)事件 
$(window).scroll(function(){ 
if($(this).scrollTop() > _defautlTop){ 
//IE6不認(rèn)識(shí)position:fixed，單獨(dú)用position:absolute模擬 
if($.browser.msie && $.browser.version=="6.0"){ 
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999}); 
//防止出現(xiàn)抖動(dòng) 
$("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'}); 
}else{ 
$("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999}); 
} 
}else{ 
$("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex}); 
} 
}); 
}); 

沒有太多好講的，需要注意的一點(diǎn)就是，IE6不認(rèn)識(shí)position:fixed，需要用position:absolute去模擬，然后實(shí)時(shí)計(jì)算出top的值，另外需要給html和body加兩個(gè)樣式，防止?jié)L動(dòng)的時(shí)候出現(xiàn)抖動(dòng)，具體可以了解《完美解決IE6不支持position:fixed的bug》。

　　另外需要注意的一點(diǎn)就是，導(dǎo)航的寬度必須是固定值，不能是auto或者100%因?yàn)閒ixed和absolute都不認(rèn)識(shí)，當(dāng)然你也可以手動(dòng)獲取到導(dǎo)航的寬度，然后寫到浮動(dòng)導(dǎo)航樣式里，不過有個(gè)前提，導(dǎo)航原先樣式里不能有：position:relative，情況可能比較多，最簡(jiǎn)單的方法還是把導(dǎo)航寬度定死。

　　以上代碼可以復(fù)制復(fù)制到后臺(tái)設(shè)置的HTML頁腳代碼里，如果遇到浮動(dòng)導(dǎo)航寬度出問題了，就參考我剛才做的處理辦法解決吧。

您可能感興趣的文章: