Question

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块中的条件。

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

Answer 1

我无法重现您遇到的问题，但有效的解决方案应该是：

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');
        }
     });

jQuery用css（）改变DIV背景

1 个答案: