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进入视图时开始？想要它开始真正的blury，然后在滚动超过div高度的250px时聚焦。

这是jsfiddle显示它在做什么，

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

工作完美，但jquery一直在计算模糊，我有一个100vh的英雄形象，当我向下滚动它仍在计算模糊，只有当div在视野中时才希望它工作，任何帮助将不胜感激！

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)'
        });
    }
});