（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