如何将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，直到它达到2000px的滚动，此时它停止并滚动#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。