4

Есть следующий код.

if ($(window).scrollTop(0)) {
 $('#console').css('background','blue'); 
 }
 else {
 $(window).on('scroll',function(){ 
    $('#console').css('background','red'); 
});
 }

При прокрутке должен меняться фон, но при возвращении скролла на самый верх фон должен возвращаться.

Он к сожалению не рабочий. Как можно сделать что бы при прокрутке стиль менялся? http://jsfiddle.net/FhRKU/39/

1 ответ 1

5
  1. Проверять .scrollTop() нужно так: if ($(window).scrollTop() == 0);
  2. $(window).on('scroll') нужно вызывать не из условия. Сейчас у вас получается, что если прокрутка посетителя находится в самом верху, то обработчик и не объявляется.
  3. Всю проверку и смену стилей лучше вынести в отдельную функцию и вызывать ее как при загрузке страницы, так и при скролле страницы.

function consoleBG() {
  if ($(window).scrollTop() == 0) {
    $('#console').css('background', 'blue');
  } else {
    $('#console').css('background', 'red');
  }
}
consoleBG();

$(window).scroll(function() {
  consoleBG();
});
#console {
  width: 100%;
  position: fixed;
  height: 20px;
  padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="console"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>dfsdsd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>trhrth
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>rfwerfwe

1
  • Спасибо! Не подумал о вызове функции почему то...
    – Кларк
    15 авг 2017 в 13:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.