div随頁面滾動遇頂固定的兩種方法

一、遇頂固定的例子

我一直以為是某個div或層随螢幕滾動，遇頂則固定，離開浏覽器頂部又還原這樣的例子其實不少，其實它的名字叫“層的智能浮動效果”。目前我們在國内的商業網站上就常常看到這樣的效果了。例如淘寶網的搜尋結果頁的排序水準條，在預設狀态時，該工具條是跟随頁面滾動的，如下圖：

而當我們下拉滾動條，随着頁面向下滾動，當此工具條接觸到浏覽器的上邊緣時，這時就會獨立出來固定在頂部，不跟随頁面滾動而滾動了，如下圖：

類似的例子效果我們在别的網站上都有看到過，例如騰訊微網誌首頁上，當我們下拉螢幕浏覽最新微網誌時，工具條也會出現這個效果，如下圖：

這個效果看上去友善，貼心，也許還帶推動廣告的促銷呢。原理其實很簡單，本文展示兩種方法。

二、智能浮動效果的實作原理

它分兩種狀态，一是預設狀态，二是浮動固頂狀态。

預設狀态就是預設狀态，什麼也不用做，保持原有的CSS就好。無論有沒有對它做定位，做了absolute也好，沒做也好，都行。

關鍵是當浏覽器螢幕滾動時，該對象div層要移除浏覽器界面視區的時候，是要修改它的position屬性，讓它浮動在視窗的上沿顯示就行了。最好的position屬性是fixed，可以在IE6+和其他浏覽器浮動層平滑的固定定位，由于IE6老大哥不支援fixed屬性，是以可以另外賦予它absolute屬性。當然也會産生副作用——滾動不平滑。不過也無所謂了，在微軟公布不再修補更新XP漏洞，在中國360安全衛士的幫助下雖然大家仍然使用XP，但IE的使用者已經是少之又少了。

那接下來，如何判斷目前div層與浏覽器視窗的上邊緣接觸了呢？遇到浏覽器頂部了呢？

當浮動層div與浏覽器視窗上邊緣接觸的一瞬間，其頁面垂直偏移值與頁面的滾動高度是一緻的，是以我們就用這個進行判斷。那如何獲得頁面上元素距離頁面的垂直距離呢？

這裡則是使用javaScript庫實作。

三、第一種實作div層智能浮動的方法

具體代碼如下：

$.fn.smartFloat = function() {

 var position = function(element) {

  var top = element.position().top, pos = element.css("position");

  $(window).scroll(function() {

   var scrolls = $(this).scrollTop();

   if (scrolls > top) {

    if (window.XMLHttpRequest) {

     element.css({

      position: "fixed",

      top: 0

     }); 

    } else {

      top: scrolls

    }

   }else {

    element.css({

     position: pos,

     top: top

    }); 

   }

  });

 };

 return $(this).each(function() {

  position($(this));      

 });

};

調用其實很簡單，将需要浮動的目标層div所設定的id，添加到以下函數代碼，如下：

$("#fixed").smartFloat();

這樣兩段代碼就可以實作ID為fixed的層有了智能浮動效果，當該層在頁面滾動時，與浏覽器上邊緣接觸時就會固定頂部，不再跟随滾動條而滾動了。當滾動回上面時，又會還原成原有狀态。當然，别忘記在頁面head之前調用jquery庫呀。具體代碼與壓縮包請在文章末尾下載下傳！

四、第二種實作div層的智能浮動效果辦法

與前面的方法差不多，隻是語句更簡單一些，當然邏輯上是沒有這麼嚴謹吧。

function scrollLis(){

 var toTop = offs.top-$(window).scrollTop();

 if(toTop==0||toTop<0){

  if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab');

 }else{

  $('#fixed').removeClass('ab');

 }

}

它的調用就多了幾句代碼了，同樣是放在層的後面，以ID标簽fixed為名：

var offs=$('#fixed').offset();

$(window).scroll(function(){

 scrollLis();

});

以上兩種方法我們都在不同的浏覽器下測試通過，包括了360安全浏覽器、搜狗、火狐、IE6~9、遨遊等等。