快捷導(dǎo)航

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

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

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

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

復(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)樣式記錄，還原初始樣式時候需要 
var _position = $("#navigator").css('position'); 
var _top = $("#navigator").css('top'); 
var _left = $("#navigator").css('left'); 
var _zIndex = $("#navigator").css('z-index'); 
//鼠標(biāo)滾動事件 
$(window).scroll(function(){ 
if($(this).scrollTop() > _defautlTop){ 
//IE6不認(rèn)識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)抖動 
$("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)識position:fixed，需要用position:absolute去模擬，然后實(shí)時計算出top的值，另外需要給html和body加兩個樣式，防止?jié)L動的時候出現(xiàn)抖動，具體可以了解《完美解決IE6不支持position:fixed的bug》。

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

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

您可能感興趣的文章: