jQuery - изменение цвета фона на прокрутке

Question

Я хочу переместить цвет фона фиксированного элемента заголовка в прокрутке. Так как пользователь прокручивает веб-сайт с полным блоком страниц, заголовок тонко изменяется, чтобы дополнить цвета блоков. Я почти достиг этого на , однако я не могу понять, как измерить, сколько было прокручено в качестве флага для того, когда нужно изменить.

Дополнительная информация: Размер прокрутки для изменения составляет 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 для получения полного кода. Любые предложения приветствуются!

Answer 1

Проверьте top каждого block относительно того, насколько окно прокручивается (scrollTop), как это:

$(window).scrollTop() > $('.block-1').offset().top 

(так что теперь мы можем использовать это, чтобы изменить цвет на входе в блок)

См демо ниже:

$(document).ready(function() { 
 
    // safe reference. We dont want this the be done every scrolled pixel! 
 
    // (Courtesy: Martijn : http://stackoverflow.com/users/2519416/martijn) 
 
    var $header = $('header'); 
 
    var $window = $(window); 
 

 
    var bgArray = ["#252525", "#333333", "#454545", "#777777"]; 
 

 
    var headerHeight = $header.outerHeight(); 
 

 
    $window.scroll(function() { 
 
    for (var i = 1; i < 5; i++) { 
 
     if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) { 
 
     $header.css('background', bgArray[i - 1]); 
 
     } 
 
    } 
 
    }); 
 

 
});

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    margin-top: 0; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    position: fixed; 
 
    font-size: 24px; 
 
    font-weight: 700; 
 
    color: #FFF; 
 
    padding: 12px 0; 
 
    margin: 0; 
 
    background: #252525; 
 
    transition: background 1s ease; 
 
} 
 
.wrap { 
 
    padding-top: 74px; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
.block-1, 
 
.block-2, 
 
.block-3, 
 
.block-4 { 
 
    height: 400px; 
 
    text-align: center; 
 
} 
 
p { 
 
    margin-top: 185px; 
 
} 
 
.block-1 { 
 
    background: #27AACC; 
 
    color: #FFF; 
 
} 
 
.block-2 { 
 
    background: #668E99; 
 
    color: #FFF 
 
} 
 
.block-3 { 
 
    background: #4AFFC1; 
 
    color: #444 
 
} 
 
.block-4 { 
 
    background: #FF8F8A; 
 
    color: #FFF 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div class="container"> 
 
    Website Title. 
 
    </div> 
 
</header> 
 

 
<div class="wrap"> 
 
    <div class="block-1"> 
 
    <div class="container"> 
 
     <p>This pen was made to solve a problem on a project...</p> 
 
    </div> 
 
    </div> 
 
    <div class="block-2"> 
 
    <div class="container"> 
 
     <p>...I needed a sticky header with thr right bg colour.</p> 
 
    </div> 
 
    </div> 
 
    <div class="block-3"> 
 
    <div class="container"> 
 
     <p>But this conflicted with the footer, which was the same colour...</p> 
 
    </div> 
 
    </div> 
 
    <div class="block-4"> 
 
    <div class="container"> 
 
     <p>So the solution was to subtley change the header's bg on scroll</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

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

$(document).ready(function(){ 
    var bgArray = ["#252525","#333333","#454545","#777777"]; 
    var scrollHeight = 400; 

    $(window).scroll(function() { 

    var scrolled = $(window).scrollTop(); 

    var index=Number((scrolled/scrollHeight).toFixed()); 

    if(bgArray[index]!=undefined) 
     $('header').css('background', bgArray[index]); 

    }); 
}) 

Это ток прокрутки, поэтому она должна быть внутри: $(window).scrollTop()

Answer 3

вы используете прокручивается в качестве фиксированной переменной вы должны использовать его непосредственно в вашем состоянии

это сделает его динамичным для всех элементов внутри обертывания div

$(document).ready(function(){ 
var bgArray = ["#252525","#333333","#454545","#777777"]; 
$(window).scroll(function() { 
    for(var i = 1; i < bgArray.length; i++) { 
     if ($(window).scrollTop() > $('.wrap div:nth-child(' + i + ')').offset().top) { 
     $('header').css('background', bgArray[i-1]);   
     } 
    } 
    }); 
})