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

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

Ответы

Ответ 1

Обновленное решение (2019)

Чтобы установить background для header на основе текущего блока в представлении под header:

  • Поскольку header имеет фиксированную позицию, мы можем получить сумму, на которую окно прокручивается, с помощью $header.offset().top,

  • (индекс текущего видимого блока) - это отношение (количество прокручиваемого окна) к (высоте каждого блока),

  • Теперь с поправкой на высоту header индекс текущего Math.floor(($header.offset().top + headerHeight)/sectionHeight) блока имеет вид Math.floor(($header.offset().top + headerHeight)/sectionHeight).

Смотрите упрощенную демонстрацию ниже:

$(function() {
  var $header = $('header'),
    $window = $(window),
    bgArray = ["#252525", "red", "blue", "green"],
    headerHeight = 50,
    sectionHeight = 400;

  $window.scroll(function() {
    $header.css('background', bgArray[Math.floor(($header.offset().top + headerHeight)
        / sectionHeight)]);
  });
});
:root {
  --header: 50px; /* header height */
  --block: 400px; /* block height */
}

* {
  box-sizing: border-box; /* include padding in width / height calculations */
}

body {
  margin: 0; /* reset default margin of body */
}

header {
  height: var(--header); /* sets height of header */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #FFF;
  padding: 12px 0;
  background: #252525; /* initial background */
  transition: background 1s ease;
}

.container {
  margin: 0 auto;
}

.wrap>div {
  height: var(--block); /* sets height of each block */
  text-align: center;
}

p {
  margin: 0; /* reset margin of p */
}

.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 bg on scroll</p>
    </div>
  </div>
</div>

Ответ 2

вы используете прокрутку как фиксированную переменную, которую вы должны использовать прямо в своем состоянии

это сделает его динамическим для всех элементов внутри wrap 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]);        
      }
    }
  });
})

Ответ 3

Попробуйте:

$(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()