Как изменить цвет элементу при пересечении экранов (при скролле)?

Question

[Александр Тимофеев]

Нужно на javascript.

Скажем, шаблон выглядит так:

<div id="block"></div>
<section></section>
<section></section>
<section></section

#block шириной и длинной 100 на 100 px c position:stinky(т.е. это как fixed). А section'ы по height=100hv. Нужно чтобы #block менял цвет background при пересечении section's.

Answer 1

[Oscar Handsome]

Привет, я такие вещи делал через.
Нахождение координат в js

Если есть более лучше варианты, я готов тоже послушать.

Answer 2

[Aleksey Solovyev]

Делается по аналогии с стики-меню. Только добавить несколько условий.

Вам необходимо узнать:
1) Значение секций относительно верха страницы:
topPos = element.offsetTop
2) Высоту секций:

h = document.getElementById('A').clientHeight ||
h = document.getElementById('A').offsetHeight ||
h = document.getElementById('A').scrollHeight ||

3) Позицию скролла:
t = window.pageYOffset

Отслеживать событие onscroll
Составить условие:
Если t между topPos(значение секции A) и topPos(значение секции A) + h(значение секции A), то меняем класс
Если t между topPos(значение секции B) и topPos(значение секции B) + h(значение секции B), то меняем класс
....
Чтобы на загружать в пустую процессор лучше добавить debounce'р для onscroll

Или использовать уже готовые библиотеки:
ScrollReveal
Scrollmagic/
Их много. Выбирайте, которая будет Вам больше подходить.
Тут нужно будет поправить отступ, при которых должно срабатывать Ваше событие. И, возможно, само событие(ибо это обычно появление, а у Вас смена класса)

Answer 3

[Ridz]

Александр Тимофеев
Смена класса при скроллинге

Answer 4

[Дмитрий Беляев]

Как то так, думаю доработаете под себя:
https://jsfiddle.net/bingo347/mxgr2vet/

Дока по IntersectionObserver: https://developer.mozilla.org/ru/docs/Web/API/Inte...
Полифил (нет нативного в сафари и ie): https://github.com/w3c/IntersectionObserver/blob/m...