高級jQuery粘性邊欄

Question

我正在研究（粘滯）滾動邊欄。問題是，大多數粘性側邊欄沒有考慮側邊欄可能比視口高（例如，如果很多項目被添加到籃子（邊欄））。這是我想要解決的。這些都是要求：

• 如果側邊欄的高度越高，則視口，應該 滾動通過內容和div的底部應該堅持 視口的底部進一步向下滾動時。

• 如果側邊欄的高度比視口高，則只有當您位於 頁面的底部時，纔會顯示下面的divs 。

• 當用戶向後滾動時，側邊欄滾動回頂部並且 粘回到視口的頂部。

• 如果側邊欄的高度小於視口，則在向下滾動時應從頂部粘貼 。

所以總的來說相當一些功能，並不是那麼簡單（我認爲）。我見過的最接近我想要實現的是這個例子：http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php但代碼寫入的方式不適合我的。

到目前爲止，這是我做了什麼：DEMO

而jQuery代碼我使用：

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      if ($content.height() > $sidebar.height()) { 
       var new_margin = $window.scrollTop() - offset.top; 
       if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) { 
        // Following the scroll... 
        $sidebar.stop().animate({ marginTop: new_margin }); 
       } else if (($sidebar.height()+new_margin) > $content.height()) { 
        // Reached the bottom... 
        $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() }); 
       } else if ($window.scrollTop() <= offset.top) { 
        // Initial position... 
        $sidebar.stop().animate({ marginTop: 0 }); 
       } 
      } 
     }, 100); 
    }); 
} 

}); 

Answer 1

您正在使用的利潤率四處移動粘邊欄 - 我發現這是一個棘手的方式來處理您當前的問題（可能更重的方式）。

一般來說，我喜歡簡單地在側邊欄中添加一個類，使其成爲「位置：固定」，因此瀏覽器在保持鎖定狀態時不費吹灰之力。

對於您當前的問題，您只需根據滾動的距離以編程方式滾動該位置固定div（也是100％的高度）。看看我的例子，看看這是影響你之後：http://jsfiddle.net/ZHP52/1/

這裏是jQuery的：

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height. 
var sidebarHeight = $sidebar.height(); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 

     if ($content.height() > sidebarHeight) { 
      var new_margin = $window.scrollTop() - offset.top; 
      if ($window.scrollTop() > offset.top) { 
       // Fix sidebar 
       $sidebar.addClass("fixed"); 
       // Scroll it the appropriate ammount 
       $sidebar.scrollTop(new_margin);    
      }else{ 
       $sidebar.removeClass("fixed"); 
      } 
     } 
    }); 
} 

}); 

Answer 2

我相信這是你正在尋找的功能：http://jsfiddle.net/JVe8T/7/

對不起雜亂的代碼，但它應該是相當容易優化它。我還假設sidebar2（非粘性的）已經定義了高度，如果不是這種情況，你可以用jquery檢測它並使用.css選擇器進行底部偏移。

這裏是我的代碼：

jQuery(document).ready(function() { 

    var tmpWindow = $(window), 
     sidebar = $('.sidebar'), 
     content = $('.content'), 
     sidebar1 = $('.sidebar1'), 
     sidebar2 = $('.sidebar2'), 
     viewportHeight = $(window).height(), 
     sidebarHeight = sidebar.height(), 
     sidebar1Height = sidebar1.height(), 
     sidebar2Height = sidebar2.height(), 
     offsetBottom; 


    tmpWindow.scroll(function(){ 

     offsetBottom = content.height() - sidebar2Height; 

     //if sidebar height is less that viewport 
     if (viewportHeight > sidebarHeight) { 
      sidebar.addClass('fixed'); 
     } 

     //sticky sidebar1 
     if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height) { 
      sidebar1.addClass('bottom'); 
     } else { 
      sidebar1.removeClass('bottom'); 
     } 

     //end of content, visible sidebar2 
     if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) { 
      sidebar1.removeClass('bottom'); 
      sidebar1.addClass('fixedBottom'); 
     } else { 
      sidebar1.removeClass('fixedBottom'); 
     } 

    }); 

}); 

Answer 3

退房hcSticky，我只是想要這個。這是一種「完美」的粘性側邊欄，也可以用選項模擬其他庫。

第一個演示可能是每個人都需要的，它獨立於主要內容滾動容器。 （您可以在到達頁面底部之前瀏覽整個側邊欄，或者在到達頁面頂部之前向上滾動欄）。

查看：http://someweblog.com/demo/hcsticky/