滚动时图像不透明度发生变化

Question

它是如何工作的？我无法解决它。 在这一侧，您可以看到滚动时不透明度为1的图像。停止滚动时，它会渐变为不透明度0。

http://heydays.no/profile/

它是如何工作的？这是css？

Answer 1

您可以通过

检查滚动位置

$(document).scrollTop()

我会在比较当前和最后一个scrollDown值的函数上调用setTimeout，这样我就可以判断是否在最后一秒滚动了正文。实施细节由您决定。 ： - ）

Answer 2

试试这个：http://jsfiddle.net/tonicboy/HvuLH/

<强> HTML：

<h1 id="word">HEYDAY</h1>
<p>a bunch of text</p>

<强> CSS：

#word {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
}

<强> JAVASCRIPT：

var stopscroll,
visible = false;

$(window).on('scroll', function () {
    clearTimeout(stopscroll);
    stopscroll = setTimeout(onStop, 250);

    if (!visible) {
        $('#word').fadeIn();
        visible = true;
    }
});

var onStop = function () {
    $('#word').fadeOut();
    visible = false;
};