停止在頁腳處浮動粘性側欄div（幾乎可以工作）

我想獲取它，因此當側欄上的最後一個div在頁面滾動時保持粘滯狀態，但停在頁腳處。我幾乎與online tutorial一起工作，但是當disqus註釋加載時計算會變得模糊起來，而且它只會到達某個點。停止在頁腳處浮動粘性側欄div（幾乎可以工作）

這是一個工作版本http://jsfiddle.net/k56yR/1/，但有沒有一種簡單的方法來做一些事情，比如計算頁腳高度，然後告訴它停止頁面底部的滾動？

來源

2012-05-19 Mike Jonas

我認爲你的問題是你的$('#footer').offset().top值在你的disqus註釋加載後改變。因此，在您的評論加載或每次事件觸發後，您需要更新footerTop（和limit，基於新的footerTop值）。

類似：

$(function(){ // document ready 
    if ($('#sticky').length) { // make sure "#sticky" element exists 
     var el = $('#sticky'); 
     var stickyTop = $('#sticky').offset().top; // returns number 
     var stickyHeight = $('#sticky').height(); 

     $(window).scroll(function(){ // scroll event 
      var limit = $('#footer').offset().top - stickyHeight - 20; 

      var windowTop = $(window).scrollTop(); // returns number 

      if (stickyTop < windowTop){ 
      el.css({ position: 'fixed', top: 0 }); 
      } 
      else { 
      el.css('position','static'); 
      } 

      if (limit < windowTop) { 
      var diff = limit - windowTop; 
      el.css({top: diff}); 
      } 
     }); 
    } 
});

與大多數的情況下，有一個jQuery插件這一點，因爲在julianm他的評論中指出，可用here。它還支持一個塞子值，用於在任何需要的位置停止粘性盒子。

來源

2012-05-19 22:13:50 19greg96

謝謝，它現在幾乎工作。原以爲是，但在不同的瀏覽器中，它忽略了限制，並且滾動通過頁腳。似乎只有在清除緩存或刷新頁面時纔會有效，然後不會針對每個重複視圖。有任何想法嗎？下面是網站上的一個例子http://thecomeupbmx.net/videos/red-bull-empire-of-dirt-practice-edit/（它不是我的，我只是在工作） –

我需要某種的測試用例總是失敗。這可能是瀏覽器緩存舊的js，但我無法重現這一點。 – 19greg96

這個jQuery插件https://github.com/AndrewHenderson/jSticky（我在Mike Jonas提供的前一個例子中的一個評論中看到了）完全符合我的要求。它支持一個停止值（可以是一個類，ID或甚至數字值）來停止粘性盒在任何需要的位置。 – julianm

停止在頁腳處浮動粘性側欄div（幾乎可以工作）

回答

相關問題