Unblur Div On Reveal

Question

我有一个要在滚动到它时模糊的div，我现在可以正常使用它，但是它在全页高度开始模糊，而不是在div出现时开始模糊，

在这里jquery：

$(window).scroll(function() {
      var revealBlur = 50 - Math.floor($(this).scrollTop() / 25);
      if (revealBlur < 0) { revealBlur = 0; }
        $('#content2').css({
        '-webkit-filter': 'blur('+revealBlur+'em)'
      });
});

div是＃content2，高度为500px，是否有一种简单的方法可以更改此代码，使其仅从出现在＃content2处开始？希望它开始真正模糊，然后在滚动超过div高度的250px时聚焦。

这是显示它在做什么的jsfiddle

https://jsfiddle.net/joshtrose/vr1n8ty7/6/

工作正常，但jquery一直在计算模糊，我有一个100vh的英雄图像，当我向下滚动时，它仍在计算模糊，只希望它在div可见时起作用，任何帮助将不胜感激！ / p>

Answer 1

如果仅希望它计算div在视图中的时间，则可以使用一种方法来检查它是否在视口中（即：检查元素是否对用户真正可见）。也有一些普通的JS方式可以做到这一点，但是如果您想使用jQuery：

// From https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

然后稍微修改您的scroll事件：

// Define myDiv outside of scroll event block
var myDiv = $('#content2');

$(window).scroll(function() {
    if (myDiv.isInViewport()) { // Check if myDiv is in view port
        var revealBlur = 50 - Math.floor($(this).scrollTop() / 25);
        if (revealBlur < 0) { revealBlur = 0; }
        myDiv.css({
            '-webkit-filter': 'blur('+revealBlur+'em)'
        });
    }
});