（div滾動跟隨）當div遇到anothere div時，（div滾動跟隨）也滾動到其他div

Question

我有4個div（標題，左右內容和頁腳）。我有right content滾動跟隨，我想要發生的是當頁腳的頂部遇到right的底部，右邊也滾動與左邊div一起。

我設置了我目前在jsfiddle中的預覽。

Answer 1

您可以使用Math.min()和預先值封頂右側欄的marginTop設置，這樣纔不會超越動畫它接觸頁腳點：

我點名預先計算出的值rightDelta。

$(function() { 
    var $sidebar = $("#right"), 
     $window = $(window), 
     rightOffset = $sidebar.offset(), 
     rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > rightOffset.top) { 
      $sidebar.stop().animate({ 
       marginTop: Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta) 
      }); 
     } else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 

}); 

Updated fiddle

事實上，你可以使用Math.min()和Math.max()結合，使滾動處理一個語句功能：

$(function() { 
    var $sidebar = $("#right"), 
     $window = $(window), 
     rightOffset = $sidebar.offset(), 
     rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(), 
     topPadding = 15; 

    $window.scroll(function() { 
      $sidebar.stop().animate({ 
       marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0) 
      }); 
    }); 

}); 

Updated fiddle