当一个新的部分成为最明显的部分时，我想要一个 background-transaparant-color-overlay 变化的效果。它按原样工作，但给了我一个警告:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features! https://fiddle.jshell.net/_display/
这种效果是否可能在没有警告的情况下发生？如何发生？
请参阅带有警告的示例 at this fiddle .
$(window).on("load scroll touchmove", function() {
var sections = ["#first", "#second", "#third", "#four", "#five"];
var colors = [
"rgb(255, 255, 255)", //white
"#ffC0CB", //pink
"rgb(0, 255, 0)", //green
"rgb(223, 181, 182)",
"rgb( 98, 83, 80)",
"rgb(157, 163, 135)",
"rgb(208, 212, 189)",
];
var spacer = $(window).height() * 0.4;
var scrollTop = $(document).scrollTop();
$.each(sections, function(index, value) {
//console.log("each " + index + ", " + value);
if ($(value).length) {
if (index == 0 || index == sections.length - 1) {
if (scrollTop >= $(value).position().top - spacer) {
$('body').css('background-color', colors[index]);
};
} else {
if (scrollTop > $(value).position().top - spacer) {
$('body').css('background-color', colors[index]);
};
}
} else {
console.log('Background color scroll: $(' + value + ') not found.');
}
});
});section {
min-height: 100vh;
}
body {
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0 none;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: red;
}
body::after {
content: "";
z-index: -1;
background: url(https://unsplash.it/1300/1150);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
background-color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section id="first">
first first
</section>
<section id="second">
second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
<br>second
</section>
<section id="third">
third
</section>
<section id="four">
4
</section>
<section id="five">
five
</section>
<div id="bg">bla</div>
</body>最佳答案
它在使用 bullseye 库时有效
https://jsfiddle.net/sottobe/xjtxnqwa/13/
//using bullseye from http://static.pixeltango.com/jQuery/Bullseye/
$(function() {
var sections = {
first:"rgb(255, 255, 255)",
second: "#ffC0CB",
third: "rgba(104, 212, 94, 0.4)",
four: "#e6f5ff",
five: "#e0e0eb",
six:"rgb(157, 163, 135)",
};
function changebgcolor(e) {
var color = sections[$(this).attr('id')];
console.log($(this).attr('id') + ': ' + e.type + ' --> ' + color);
$('body').css('background-color', color);
}
alert('binding');
$('section').bind('enterviewport', changebgcolor).bullseye();
});
关于jquery - css scroll-linked positioning effect warning on change background 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41531146/