function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function() {
if (isScrolledIntoView('#window_1')) {
$('#container').css('background', 'url(http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg) no-repeat center');
$('#container').css('background-size', 'cover');
}
else if (isScrolledIntoView('#window_2')) {
$('#container').css('background', 'url(http://media3.letsbonus.com/products/258000/258380/13960103441079-0-680x276.jpg) no-repeat center');
$('#container').css('background-size', 'cover');
}
});#container {
position: fixed;
width: 100vw;
height: 100vh;
background: url('http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg') no-repeat center;
background-size: cover;
z-index: -1;
}
.section {
position: relative;
background-color: black;
width: 100vw;
height: calc(100vh + 200px);
color: white;
font-size: 30px;
text-align: center;
}
.window {
position: relative;
width: 100vw;
height: 100vh;
background-color: transparent;
}<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
</head>
<body>
<div id="container"></div>
<div class="section">
<p>Scroll</p>
</div>
<div id="window_1" class="window"></div>
<div class="section">
<p>Scroll</p>
</div>
<div id="window_2" class="window"></div>
</body>
</html>我有一个带有 id="container"的简单 DIV，我想在滚动时更改背景图像。下面是 jQuery 代码。不要关心 if-else block 中的条件。
$(window).scroll(function() {
if (condition_1) {
$('#container').css('background', 'url(../CSS/Images/image1.jpg) no-repeat center');
}
else if (condition_2) {
$('#container').css('background', 'url(../CSS/Images/image2.jpg) no-repeat center');
}
});
它在 Chrome 和 Safari 上完美运行。它不适用于 IE11 和 Firefox:它们在两种情况下始终显示白色背景。 在 Chrome、IE11 和 Firefox 上使用开发人员工具，我验证了事件总是被正确触发并且 css() 总是被执行。尽管如此，我仍然只在 IE11 和 Firefox 上有白色背景。我不明白为什么。我该如何解决？ 可能是 jQuery 兼容性问题或 jQuery 错误？ 这是我正在使用的 jQuery 库:http://code.jquery.com/jquery-2.0.0b1.js
最佳答案
我无法重现您遇到的问题，但可行的解决方案应该是:
CSS:
#container {
position: fixed;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: -1;
}
.container-image {
background: url('http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg') no-repeat center;
}
.container-replace-one {
background: url(http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg) no-repeat center;
background-size:cover;
}
.container-replace-two {
background: url(http://media3.letsbonus.com/products/258000/258380/13960103441079-0-680x276.jpg) no-repeat center;
background-size:cover;
}
HTML:
<div id="container" class="container-image"></div>
jQuery:
$(window).scroll(function() {
if (isScrolledIntoView('#window_1')) {
$('#container').removeClass('container-image');
$('#container').removeClass('container-replace-two');
$('#container').addClass('container-replace-one');
}
else if (isScrolledIntoView('#window_2')) {
$('#container').removeClass('container-image');
$('#container').removeClass('container-replace-one');
$('#container').addClass('container-replace-two');
}
});
关于javascript - jQuery 使用 css() 改变 DIV 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27220328/