Я хочу переместить цвет фона фиксированного элемента заголовка в прокрутке. Так как пользователь прокручивает веб-сайт с полным блоком страниц, заголовок тонко изменяется, чтобы дополнить цвета блоков. Я почти достиг этого на Pen, однако я не могу понять, как измерить, сколько было прокручено в качестве флага для когда нужно изменить.
Дополнительная информация: Размер прокрутки для изменения составляет 400 пикселей. Цвет фона сохраняется и выбирается в массиве. Для справки мой код jQuery приведен ниже:
$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
var scrollHeight = 400;
var scrolled = $(window).scrollTop(); //What is this measuring?
$(window).scroll(function() { //Can these conditions be neatened into one function?
if(scrolled < scrollHeight) {
$('header').css('background', bgArray[0]);
}
if(scrolled > scrollHeight) { // i.e more than 400px
$('header').css('background', bgArray[1]);
}
// and so on (800, 1200...)
})
})
Пожалуйста, обратитесь к Pen для полного кода. Любые предложения приветствуются!