如何让2+盒向下滑动

Question

我一直在阅读几个不同地方的教程，例如http://css-tricks.com/scrollfollow-sidebar/或http://jqueryfordesigners.com/fixed-floating-elements/ 并且一直在玩弄它们，但似乎无法弄清楚我将如何添加更多，然后只是那一个滑动框在页面上。有什么想法吗？

Answer 1

我的假设（从第一个示例链接）是，而不是只有#sidebar保持在视图中，而是希望让另一个元素也滚动窗口（即登录到用户的详细信息）。

最简单的方法是将这一信息添加到您现有的滚动元素：

<ul id="sidebar"> 
    <li id="user-details">Name: John Doe<br/>Email: john.doe@gmail.com</li> 
    <!-- remaining links here --> 
</ul> 

但是，如果要滚动与窗口两个元素：

<ul id="sidebar"> 
    <!-- sidebar links --> 
</ul> 
<ul id="user-details"> 
    <!-- user details --> 
</ul> 

这纯粹是在$(window).scroll()事件处理程序中为他们的margin-top设置动画：

编辑

下面的代码滚动#sidebar直到它到达滚动2000像素，在该点停止和涡卷#user-details直到它到达滚动的4000px：

// constants for the scrolling 
var offsetSidebar = $("#sidebar").offset(); 
var offsetUserDetails = $("#user-details").offset(); 

// on scroll of window 
$(window).scroll(function() { 
    scrollElement($("#sidebar"), offsetSidebar, 2000); 
    scrollElement($("#user-details"), offsetUserDetails, 4000); 
}); 

// handle the scrolling 
function scrollElement(elem, offset, boundary){ 
    var currOffset = elem.offset(); 
    if(currOffset.top < boundary && $(window).scrollTop() < boundary){ 
     if ($(window).scrollTop() > offset.top) { 
      elem.stop().animate({marginTop: $(window).scrollTop() - offset.top}); 
     } else { 
      elem.stop().animate({marginTop: 0}); 
     } 
    } 
} 

你可以看到它in action here。