嗨,我做了一个简单的滚动显示,以便初始div下方的div在显示时不模糊,它在jsfiddle中完美运行,但是当我将其放入我的网站时,它不起作用...一切都是一样的,只有我的网站使用 jquery 版本 3.2.1 min 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>
Chrome 不太支持position:sticky
。你可以检查这些 我可以使用吗,
这里
根据我可以使用吗,直到版本 55,它根本不支持,并且在 56 到当前版本之后,它对 chrome 的支持有限。
你能尝试在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)'
});
});
}(;
希望这有帮助
将下面的 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)'
});
});
});