Как при прокрутке изменить стиль?

375

16 августа 2017, 20:28

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

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

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

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

Answer 1

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

12:26

Телевизор Xiaomi и телевизор Самсунг
10:30
18:43

Продвижение своими сайтами как стратегия роста и независимости
22:46

Бизнесы, которым нужна ERP система
06:18
12:23
20:41

Как малому бизнесу конкурировать с маркетплейсами
06:31
21:28

Все вопросы

ТОП-10

Все популярные вопросы

Как кастомизировать компоненты React Bootstrap?

Создатели React перенесли Bootstrap под свою гребенкуПри работе с данной библиотекой React-Bootstrap, возник вопрос, как кастомизировать стили компонентов?...

297

javascript