时间戳

首页 > 解决方案 > 滚动显示模糊卡住

jquery - 滚动显示模糊卡住

问题描述

嗨，我做了一个简单的滚动显示，以便初始 div 下面的 div 不模糊，如图所示，它在 jsfiddle 中完美运行，但是当我将它放入我的网站时它不起作用......一切都只是我的网站是一样的使用 jquery 版本 3.2.1 min js，

如果有人可以让我知道为什么它不能在我的网站上运行，但在 JS fiddle 上运行会很棒！

$(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>

标签： jqueryhtmlcss

解决方案

position:stickychrome 支持的不是很好。你可以从 Can I Use 中查看这些，

这里

根据 Can I use，直到版本 55，它根本不支持，在 56 到当前版本之后，它对 chrome 的支持有限。

推荐阅读