Как, проскролив определенную высоту, поменять background у дива с классом header?

Question

[Василий Хрягин]

У меня фиксированное меню вначале без фона. Фон меню надо при скроле поменять на белый и текст в нем на черный. Как это можно реализовать?

• продукт
  
• возможности
  
• методика
  
• наука
  
• о нас
  

Comments

[Виталий Киренков]

Вы в курсе, что ответы которые работают нужно помечать как Решение? У вас 6 вопросов и ни одного отмеченного.

[Юрий Есин]

Виталий Киренков, у меня таких ответов без пометки уже 70%. Просто сказали "спасибо" и ушли, а чаще вообще воспользовались решением и забили. Что поделать, такой у нас народ, главное получить желаемое, о компенсировании чужого времени редко кто задумывается)

Answer 1

[quake4fun]

$(window).scroll(function () {
	if ($(this).scrollTop() > 150) {
		$('.header').addClass('white');
	}
	else{
		$('.header').removeClass("white");
	}
});

.white {
	background-color: #fff;
	color: #000;
}

Comments

[Василий Хрягин]

а как плавно изменение сделать?

[quake4fun]

Попробуйте так :)

.header {
  transition:  300ms;
}

[Василий Хрягин]

quake4fun, спасибо большое))

Answer 2

[Юрий Есин]

В обработчике скроллинга поставьте проверку на позицию скроолинга относительно текущего блока на экране, если условие верно, то просто меняете стиль блока меню background: #fff; color: #000;