jquery - 如何让2个以上的盒子向下滑动

Question

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

Answer 1

我的假设(来自第一个示例链接)是，您不仅希望让 #sidebar 保持在 View 中，还希望让另一个元素随窗口滚动(即登录用户的详细信息) .

最简单的方法是将此信息添加到您现有的滚动元素中:

<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 .