Jquery DIV碰撞

Question

我發現下面的腳本可以使菜單在滾動時在屏幕後面有一個流暢的動畫。

但是，它會壓低頁腳，導致頁面高度不再擴展。如何在與頁腳碰撞時停止滾動？

下面的代碼：

$(function() { 

    var $sidebar = $("#indhold_right"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 0; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }, "fast"); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 

}); 

Answer 1

讓我們退後一步，看看爲什麼它正在發生的事情正在發生的方式。 當你滾動$window.scrollTop()和offset.top都改變。然而，前者總是比後者大。所以，每次滾動時，if條件的計算結果都爲true，並且您正在調用它的動畫函數。你沒有停止。

我們該怎麼做？通過停止檢查，超過這個限制你不會動畫。當頁面加載時獲得$("#footer").offset().top這是開始時的頁腳高度。所以，支票是針對$window.scrollTop()，這應該比頁腳頂部小。

檢查工作嗎？是的，但它不會令人愉快（除非你需要這樣做），因爲你的邊欄有高度，只有在你的邊欄頂部達到頁腳高度（停止）後，停止纔有效。所以，只需添加側欄高度即可。這不會是100％準確的，會有填充，邊距和其他在這個站點沒有考慮到的東西，但它看起來很不錯，我認爲，你可以從那裏繼續。

在我給你代碼的答案之前，請看看http://sscce.org/（正如@Zeta所提到的）。始終遵循這一點。我有一段時間，心情很好。否則我甚至不會去看它。

以下是代碼。工作實例 - http://jsfiddle.net/H3Dqr/

$(function() { 

    var $sidebar = $("#indhold_right"), 
     $window = $(window), 
     offset = $sidebar.offset(), 
     topPadding = 0, 
     stop = $("#footer").offset().top; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      if ($window.scrollTop() + $sidebar.height() < stop) { 
       $sidebar.stop().animate({ 
        marginTop: $window.scrollTop() - offset.top + topPadding 
       }, "fast"); 
      } 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 

});​