动画div以在视图中捕捉最多元素 [英] Animate div to snap to element most in view

问题描述

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

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

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

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

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

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

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

谢谢你任何指针人！

解决方案

所以我更改了 changeSection（）中的一些代码功能。它有点工作，但绝对不完美。也许它会指向正确的方向吗？

还注释了动画onScroll。

  function changeSection（）{
 $（'。active'）。removeClass（'active'）; 
 var currentActive = $（'section'）。eq（nearestArrPos）; 
 currentActive.addClass（'active'）; 
 $（＃horiz）。animate（{top：currentActive [0] .offsetTop + currentActive.height（）}，fast）; 
} 
  

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

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

I have a series of elements, one beneath the next. There will be content at the top of each of these elements but a space at the bottom over which a horizontal bar will sit.

There is only one horizontal bar on the page. It needs to be 'fixed' to the bottom of the first element until that element is scrolled out of view, at which point it needs to animate to the bottom of the currently-in-view element.

I've mocked up a fiddle which shows some logic for highlighting the currently active section, which I'm happy with. The sections are grey by default. The most-in-view section as you scroll up and down turns red to indicate that it's the active section - which works fine. The horizontal bar is in blue.

What I'm struggling with is getting the blue bar to animate down to the bottom of the red section as it changes on scroll.

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

The main reason my code in the fiddle isn't working I think is because the window scroll event isn't 'live' so doesn't know what the currently active (red) section is.

Can anyone suggest how to achieve this?

Thanks for any pointers folks!

解决方案

So I changed some code in your changeSection() function. It sort of works, but definitely not perfect. Maybe it will point you in the right direction though?

Also commented out the animation 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/

Also needed to put the window.scroll event in a setTimeOut function so it only gets called effectively after the scroll is finished rather than many times throughout.

这篇关于动画div以在视图中捕捉最多元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！