Question

我有一系列元素，一个在下一个元素之下。每个元素的顶部都有内容，但底部有一个空格，水平条位于底部。

页面上只有一个水平条。它需要“固定”到第一个元素的底部，直到该元素滚动到视图之外，此时需要将其设置为当前视图元素的底部动画。

我嘲笑了一个小提琴，它显示了一些突出当前活动部分的逻辑，我很满意。这些部分默认为灰色。当您向上和向下滚动时，最具视图的部分变为红色，表示它是活动部分 - 工作正常。水平条为蓝色。

我正在努力的是让蓝色条动画向下移动到红色部分的底部，因为它在滚动时会发生变化。

http://jsfiddle.net/9kW5N/2/

我的代码在小提琴中不起作用的主要原因我认为是因为窗口滚动事件不是“实时”因此不知道当前活动（红色）部分是什么。

有人可以建议如何实现这个目标吗？

感谢任何人们的指点！

Answer 1

所以我在changeSection()函数中更改了一些代码。它有点工作，但绝对不完美。也许它会指出你正确的方向？

还注释了动画onScroll。

function changeSection() {
    $('.active').removeClass('active');
    var currentlyActive = $('section').eq(closestArrPos);
    currentlyActive.addClass('active');
    $("#horiz").animate({"top" : currentlyActive[0].offsetTop + currentlyActive.height()}, "fast");
}

DEMO ：http://jsfiddle.net/9kW5N/5/

还需要将window.scroll事件放在setTimeOut函数中，这样只有在滚动完成后才会有效地调用它，而不是在整个滚动过程中多次调用。

动画div以在视图中捕捉最多元素

1 个答案: