Question

嗨，我做了一个简单的滚动显示，以使初始div下方的div变得不模糊，如图所示，它在jsfiddle中可以完美地工作，但是当我将其放到我的网站中时，它就无法正常工作...一切实际上只是相同的我的网站使用的是jQuery版本3.2.1最小js，

如果有人可以让我知道为什么它不能在我的网站上运行，但是在JS小提琴上运行，那将很棒！

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

body {
  margin: 0;
}
.content2 {
    width: 100%;
    height: 300px;
    position: sticky;
    bottom: 0;
    z-index: -1;
    background: url(https://placekitten.com/1200/800) no-repeat;
}
.content1 {
    width: 100%;
    height: 300px;
    position: relative;
    background: url(https://placekitten.com/1200/800) no-repeat;
}

#content2 {
  -webkit-filter: blur(15px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="content1" class="content1"></div>
<div id="content2" class="content2">
</div>

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

我正在使用的jQuery文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

chrome不太支持

position:sticky。您可以从“我可以使用”中进行检查，

Here

根据我的使用情况，直到第55版，它完全不受支持，而在第56版到当前版本之后，它对chrome的支持有限。

Answer 2

请您尝试在domContentLoaded事件中添加代码，例如：

window.addEventListener("DOMContentLoaded", function(){
   $(window).scroll(function() {
     var revealBlur = 10 - Math.floor($(window).scrollTop() / 15);
     if (revealBlur < 0) { revealBlur = 0; }
       $('#content2').css({
       '-webkit-filter': 'blur('+revealBlur+'px)'
     });
   });

}）;

希望这会有所帮助

Answer 3

将下面的jquery代码移到了.js文件顶部附近，现在可以使用了。

window.addEventListener("DOMContentLoaded", function(){
   $(window).scroll(function() {
     var revealBlur = 10 - Math.floor($(window).scrollTop() / 15);
     if (revealBlur < 0) { revealBlur = 0; }
       $('#content2').css({
       '-webkit-filter': 'blur('+revealBlur+'px)'
     });
   });
});

滚动显示模糊卡在

3 个答案: