2013-03-06 108 views
0

我有4个div(标题,左右内容和页脚)。我有right content滚动跟随,我想要发生的是当页脚的顶部遇到right的底部,右边也滚动与左边div一起。(div滚动跟随)当div遇到anothere div时,(div滚动跟随)也滚动到其他div

我设置了我目前在jsfiddle中的预览。

+0

尝试看看这个。看起来和你的问题一样.. http://stackoverflow.com/questions/15215660/fixing-unfixing-div-when-scrolling – kirk 2013-03-06 01:36:31

+0

谢谢你的回复,我会检讨我们是否有同样的情况。 – jhunlio 2013-03-06 01:39:43

+0

我认为我们的情况不一样,或者我错了,谢谢你的回复。 – jhunlio 2013-03-06 02:05:03

回答

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

+0

你的想法很聪明谢谢你的回答。 – jhunlio 2013-03-06 03:25:36