1

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

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

我已经模拟了一个小提琴，它显示了一些突出当前活动部分的逻辑，我对此很满意。默认情况下，这些部分是灰色的。当您向上和向下滚动时，最显眼的部分会变为红色，表示它是活动部分 - 效果很好。水平条为蓝色。

我正在努力使蓝色条在滚动时更改为动画到红色部分的底部。

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

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

谁能建议如何实现这一目标？

感谢大家的指点！

4

1 回答 1

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");
}

演示：http: //jsfiddle.net/9kW5N/5/

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

于 2012-07-05T21:18:23.910 回答