Question

我在页面中间有3个块，当用户向下滚动时，客户端希望在向上转换中出现这些块。我整个上午一直在研究滚动效果的转换，我发现的大多数都是视差页面和标题。

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

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

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

我给ul类提供了1600px的上限，所以当用户向下滚动到它时，当它进入视口视图时，我怎么能将它提高100px？

Answer 1

在滚动时，您可以检查元素是否已进入视图，并相应地设置其属性，使用类似的方法检查它是否在视口中：

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

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

Answer 2

我用以下方法解决了这个问题:(我发现这个jsfiddle的礼貌：http://jsfiddle.net/vVaat/76/）

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on("scroll", function() {

    $('.testimoniallist').each(function() {
        if (isScrolledIntoView(this)) {
            $(this).addClass('yes');
        } else {
            $(this).removeClass('yes');
        }
    });

});

当页面到达页面时需要一个元素移动位置

2 个答案: