Как лучше сделать смену цвета фона при скролле?

Question

[Дима Паутов]

У меня есть функция:

function colouredBg(){
	var 
		bgBlock = $('#colouredBg'),
		sections = $('.section'),

		// Массив с цветами
		colors = [
			'#3d4854', 
			'#c1392b', 
			'#281a1a', 
			'#d67971', 
			'#100d08', 
			'#462e2e'
		],

		// Берем случайный номер цвета
		randomColor = Math.floor(Math.random() * (0 + colors.length));

	bgBlock.css('backgroundColor', colors[randomColor]);
}

Которая устанавливает случайный цвет в фон блока.

Есть секции, это блоки(О компании, Партнеры, Контакты, Галерея)

<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

Сейчас у меня каждый прокрученный пиксель меняется цвет. Подскажите, как сделать так, что бы фон менялся, доскроливая до блока(любого).

Answer 1

[Александр Гамов]

Как вариант отслеживать появление блока во вьюпорте и затем запускать функцию.
https://habrahabr.ru/post/240083/

Можно воспользоваться API от плагина imakewebthings.com/waypoints