div隨頁面滾動遇頂固定的兩種方法(js&jQuery)

1、遇頂固定的例子

我一直覺得是某個div或層隨屏幕滾動，遇頂則固定，離開瀏覽器頂部又還原這樣的例子其實很多，其實它的名字叫「層的智能浮動效果」。目前咱們在國內的商業網站上就經常看到這樣的效果了。例如淘寶網的搜索結果頁的排序水平條，在默認狀態時，該工具條是跟隨頁面滾動的，以下圖：

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

相似的例子效果咱們在別的網站上都有看到過，例如騰訊微博首頁上，當咱們下拉屏幕瀏覽最新微博時，工具條也會出現這個效果，以下圖：

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

2、智能浮動效果的實現原理

它分兩種狀態，一是默認狀態，二是浮動固頂狀態。

默認狀態就是默認狀態，什麼也不用作，保持原有的CSS就好。不管有沒有對它作定位，作了absolute也好，沒作也好，都行。

關鍵是當瀏覽器屏幕滾動時，該對象div層要移除瀏覽器界面視區的時候，是要修改它的position屬性，讓它浮動在窗口的上沿顯示就好了。最好的position屬性是fixed，能夠在IE6+和其餘瀏覽器浮動層平滑的固定定位，因爲IE6老大哥不支持fixed屬性，因此能夠另外賦予它absolute屬性。固然也會產生反作用——滾動不平滑。不過也無所謂了，在微軟公佈再也不修補更新XP漏洞，在中國360安全衛士的幫助下雖然你們仍然使用XP，但IE的用戶已是少之又少了。

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

當浮動層div與瀏覽器窗口上邊緣接觸的一瞬間，其頁面垂直偏移值與頁面的滾動高度是一致的，因此咱們就用這個進行判斷。那如何得到頁面上元素距離頁面的垂直距離呢？

這裏則是使用javaScript庫實現。

3、第一種實現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 {
     element.css({
      top: scrolls
     }); 
    }
   }else {
    element.css({
     position: pos,
     top: top
    }); 
   }
  });
 };
 return $(this).each(function() {
  position($(this));      
 });
};

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

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

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

4、第二種實現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~九、遨遊等等。

你能夠點擊這裏下載相應的代碼：div層隨屏幕滾動遇頂固定的智能浮動效果 http://www.seo0763.net/uploads/soft/div-follow-web-totop.rar

5、結語

已經好久沒有寫這些效果與實例文章了，好多項目都在嘗試當中，時間也是過得飛快。也只有當遇到問題須要解決時，纔在收集資料、學習研究後才分享出來。

固然咱們的能力有限，資歷很淺，這些方法僅供參考。或者有別的更好的更簡潔更快速的方法，也歡迎你們分享給咱們。本文屬於原創文章，由英德網站建設http://www.seo0763.net提供，轉載請註明出處。

 

 

來源:http://blog.sina.com.cn/s/blog_a438a4be0101spft.html

 

 

 

demo在本博客「上傳文件」中