JavaScript滚动事件，淡入淡出？

Question

我试图将一些div固定在适当的位置，并在用户向下滚动时淡入淡出。到目前为止，我的代码如下所示：

$(window).on("load",function() {
    var fadeDuration = 500;
    function fade() {
    // compute current window boundaries
    var windowTop = $(window).scrollTop(),
        windowBottom = windowTop + $(window).innerHeight(),
        focusElt = null;

    // find our focus element, the first visible .copy element,
    // with a short-circuiting loop
    $('.imgdiv').toArray().some(function(e, i) {
        var objectTop = $(e).offset().top;
        if ((objectTop >= windowTop) && (objectTop <= windowBottom)) {
            focusElt = e;
            return true;
        }
            console.log(focusElt);

    });

    // obscure all others
    $('.focus').not(focusElt)
        .removeClass('focus')
        .fadeTo(fadeDuration, 0);

    // focus on our focus element; if was the previous focus, nothing
    // to do; but if it wasn't focus / wasn't showing before, make
    // it visible and have class focus
    $(focusElt).not('.focus')
        .addClass('focus')
        .fadeTo(fadeDuration, 1);

}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll

})；

Here's the corresponding fiddle几乎实现了我想要的效果，但不是绿色的“淡入”块向上移动和淡出，我希望它们在靠近窗口顶部的地方变细。当"IMG DIV“移过它们时，它们将随着每个新的"IMG DIV”而褪色和重新出现。在这里，我将重点放在特定的绿色块上，并在它成为焦点元素时将其淡出。相反，我需要做的是，专注于IMG DIV块，当绿色块到达页面顶部时，向绿色块添加一个“固定”类，然后淡入淡出绿色块。

有人有什么建议吗？

我的问题的第二部分是如何使用原生JavaScript实现这一点，而不依赖于jQuery的依赖性。

Answer 1

好的，让我们把你的第一期分成两期:)

首先，您希望(通常)在某些元素在视口中可见和不可见时执行某些操作。所以，基本上，你所需要的就是这样的函数：

watchElementIsInViewport(
    $('.imgdiv'),
    doSomethingWhenElementAppearedInViewport,
    doSomethingWhenElementOutOfViewport
);

你知道，当元素变得可见时，你想要显示一些其他元素。当元素变得不可见时，您希望隐藏相关元素。现在，定义这两个函数：

function doSomethingWhenElementAppearedInViewport(element) {
    // retrieve text related with the element
    var $copy = $(element).next('.copy');

    // fade it in
    $copy.fadeTo(500, 1);
}

function doSomethingWhenElementGotOutOfViewport(element) {
    // retrieve text related with the element
    var $copy = $(element).next('.copy');

    // fade it out
    $copy.fadeTo(500, 0);
}

那watchElementIsInViewport呢？里面没有魔法，只有你已经创建的逻辑，但与查找元素的显示解耦。

function watchElementIsInViewport($elements, elementAppearedInViewport, elementGotOutOfViewport) {
    var currentlyVisible = [ ];    
    // retrieve positions once, assume it won't change during script is working
    var positions = getVerticalBoundaries($elements);

    function _scrollHandler() {
        var viewportTop = window.scrollY;
        var viewportBottom = viewportTop + window.innerHeight;

        $elements.each(function(index, element) {
            var elementPosition = positions[index];
            /* if you wish to check if WHOLE element is in viewport
             * var elementIsInViewport = (elementPosition.top >= viewportTop) &&
             *   (elementPosition.bottom <= viewportBottom);
             */
            var elementIsInViewport = (elementPosition.top < viewportBottom) &&
                (elementPosition.bottom > viewportTop);
            var elementIndexInCurrentlyVisible = currentlyVisible.indexOf(element);

            // if element is visible but was not visible before
            if(elementIsInViewport && (elementIndexInCurrentlyVisible === -1)) {
                elementAppearedInViewport(element);

                currentlyVisible.push(element);
            // if element is not visible but was visible before
            } else if(!elementIsInViewport && (elementIndexInCurrentlyVisible !== -1)) {
                elementGotOutOfViewport(element);

                currentlyVisible.splice(elementIndexInCurrentlyVisible, 1);
            }
        });
    }

    // initial check & update
    _scrollHandler();

    // check & update on every scroll
    $(window).on('scroll', _scrollHandler);
}

仅此而已。Working example。