jquery - Unblur Div On Reveal

Question

我有一个 div，我想在滚动到它时取消模糊，我现在可以使用它，但它在整个页面高度开始模糊，而不是在 div 进入 View 时开始模糊，

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，它的高度是 500 像素，有没有一种简单的方法可以将此代码更改为仅从 #content2 出现的点开始？希望它开始时非常模糊，然后在您滚动超过 250 像素的 div 高度时聚焦。

这是显示它正在做什么的 jsfiddle，

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

工作完美，但 jquery 一直在计算模糊，我有一个 100vh 的英雄图像，当我向下滚动时它仍在计算模糊，只希望它在看到 div 时工作，任何帮助将不胜感激!

Answer 1

如果您只希望它在 div 在 View 中时计算，您可以使用一种方法来检查它是否在视口(viewport)中(即:检查元素是否对用户实际可见)。也有一些简单的 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)'
        });
    }
});