javascript - 需要一个元素在到达页面时移动位置

Question

当用户向下滚动到它时，客户端希望在向上过渡中出现的页面中间有 3 个 block 。我整个上午都在研究滚动效果的过渡，我发现的大部分内容都是视差页面和标题。

<ul class="testimoniallist">
<li>
stuff
</li>
<li>
more stuff
</li>
<li>
Other stuff
</li>

• 用户访问网站
• 用户向下滚动到包含该 UL 和三个列表项的部分
• 然后三个列表项似乎向上过渡

出于测试目的，我在这里创建了一个 jsfiddle:http://jsfiddle.net/odyq4rc7/

我给 ul 类设置了 1600 像素的顶部边距，所以当用户向下滚动到它时，当它进入视口(viewport) View 时，我怎么能把它提高 100 像素？

Answer 1

在滚动时，你可以检查元素是否进入 View ，并相应地设置它的属性，使用类似这样的东西来检查它是否在视口(viewport)中:

function isScrolledIntoView( element ) {
    var elementTop    = element.getBoundingClientRect().top,
        elementBottom = element.getBoundingClientRect().bottom;

    return elementTop >= 0 && elementBottom <= window.innerHeight;
}