Как изменить background-color DIV class на определенной высоте (замена цвета элемента при скролле)?

Question

[Чёкатилло]

По возможности, дайте пожалуйста точный ответ

Answer 1

[iBird Rose]

$(window).scroll(function() {
    if ($(this).scrollTop() > 228) {$('div').addClass('green');}
});

228 можешь вычислять к примеру через .offset() дива. если нужно в каком-то положении

Comments

[Чёкатилло]

Чет не получается пока что
Все правильно?
$(window).scroll(function() {
if ($(this).scrollTop() > 545) {$('intro-page').addClass('green');}
});
Так же, изначально фон дива задан через css

[iBird Rose]

Дмитрий: я написал просто добавление класса green. для этого класса еще стили надо написать. ты их пишешь? к примеру .green {background: green;} или воспользуйся скриптом Алексей ниже. он без классов предложил

[Чёкатилло]

iBird Rose: да я в css не соображаю
Надо прописать стили . green в css?

[Чёкатилло]

iBird Rose: Лан, получилось по Алексею

Answer 2

[Алексей]

Либо не через классы:

$(window).scroll(function () {
  if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 100) {
    $('div').css('backgroundColor', 'red');
  } else if ($(this).scrollTop() >= 100 && $(this).scrollTop() < 200) {
    $('div').css('backgroundColor', 'blue');
  } else if ($(this).scrollTop() >= 200 && $(this).scrollTop() < 300) {
    $('div').css('backgroundColor', 'green');
  } else if ($(this).scrollTop() >= 300 && $(this).scrollTop() < 400) {
    $('div').css('backgroundColor', 'yellow');
  } else {
    $('div').css('backgroundColor', 'black');
  }
});

codepen.io/AmateR/pen/rLkqKZ

Comments

[Чёкатилло]

Здорово получилось Спасибо То, что не через классы будет ли работать в мобильных и тп?
И можете ли еще подсказать, как сделать смену цвета плавной

[Алексей]

На мобильниках работать будет. Плавно можно, но нужно будет подключить плагин jQueryUI - jqueryui.com.

Получится что то вроде такого:

$(window).scroll(function () {
if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 100) {
$('div').stop();
$('div').animate({backgroundColor: 'red'}, 300);
} else if ($(this).scrollTop() >= 100 && $(this).scrollTop() < 200) {
$('div').stop();
$('div').animate({backgroundColor: 'blue'}, 300);
} else if ($(this).scrollTop() >= 200 && $(this).scrollTop() < 300) {
$('div').stop();
$('div').animate({backgroundColor: 'green'}, 300);
} else if ($(this).scrollTop() >= 300 && $(this).scrollTop() < 400) {
$('div').stop();
$('div').animate({backgroundColor: 'yellow'}, 300);
} else {
$('div').stop();
$('div').animate({backgroundColor: 'black'}, 300);
}
});

[Алексей]

codepen.io/AmateR/pen/rLkqKZ

[Чёкатилло]

Алексей: мужик- ты крут Спасибо

[Чёкатилло]

Алексей: Спасибо У меня возник еще вопрос по тому же делу:Как сделать так, чтобы два разных по составу, но похожие по назначению скрипта работали «одновременно»? Может будет интересно