JQuery изменения DIV фона с помощью CSS()

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() { 
 
\t if (isScrolledIntoView('#window_1')) { 
 
\t \t $('#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'); 
 
\t } 
 
\t else if (isScrolledIntoView('#window_2')) { 
 
\t \t $('#container').css('background', 'url(http://media3.letsbonus.com/products/258000/258380/13960103441079-0-680x276.jpg) no-repeat center'); 
 
     $('#container').css('background-size', 'cover'); 
 
\t } 
 
});

#container { 
 
\t position: fixed; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background: url('http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg') no-repeat center; 
 
\t 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>

У меня есть простой 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

источник

2014-12-01 smn.tino

Что делать, если вы положили ''! Important'' после '' center'' в значение? – ub3rst4r

Можете ли вы воспроизвести проблему в фрагменте стека или в jsFiddle? – apaul

Я не могу воспроизвести проблему в редакторе Firefox версии 35.0a2. Какую версию firefox вы используете? – baao

Я не могу воспроизвести проблему вы имеете, но рабочий раствор должен быть:

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

источник

2014-12-01 01:56:14 baao

Да, теперь это работает. Но я до сих пор не понимаю, почему jQuery css() не работает должным образом с фоновым свойством в IE и Firefox. Ты знаешь почему? –

Отлично. Но это действительно странно ... – baao

JQuery изменения DIV фона с помощью CSS()

ответ

Смежные вопросы