Как добавлять класс (разный) элементу при скролле?

Question

[Сергей]

Подскажите пожалуйста как можно изменять класс у одного элемента при скролле?

Есть 20 section с уникальными id. Для удобства можно начать называть их одинаково. #section_...
Есть один div со своим id.

Как при нахождении на каком то section добавить уникальный класс для div ?
Высота контента не фиксированная.

Comments

[Сергей delphinpro]

Для начала нужно формализовать это "при нахождении на каком то section"
Например,
Мы находимся на каком-то section, если
1) верхняя граница section совпала с верхней границей окна или ушла вверх за ее пределы
2) высота секции меньше высоты экрана и нижняя граница секции пересекла нижнюю границу экрана.
и т.д. Нужно математически учесть все варианты определения факта нахождения "на секции".
А дальше дело техники. Просто отслеживаем скролл и сравниваем scrollTop с координатами секций. Тут и ребенок справится =)

[Сергей delphinpro]

Если ближе к практике, то:
Сначала пишем функцию, которая определит координаты всех секций и их высоту и сохранит эти данные в массиве. Эту функцию вызовем сразу, плюс повесим ее на событие resize окна.
Далее определимся с определением "активная секция" - это секция, большая часть которой в процентном отношении находится в области видимости.
Теперь пишем функцию реакции на скролл страницы. В ней получаем значения scrollTop и height окна и в цикле пробегаем по массиву данных, собранных первой функцией.
На каждой итерации смотрим какой процент высоты секции приходится на область просмотра. Если section.top > windowScrollTop + windowHeight значит секция внизу и совсем еще не видна. Если section.bottom < windowScrollTop то секция уже вверху и тоже не видна. Дальше самое интересное. Нужно вычислить высоту той части секции, которая в данный момент видна на экране. Честно говоря, навскидку я сейчас не напишу вам формул, но, думаю, вам будет несложно нарисовать на бумажке чертежик и самому их вывести. В итоге на каждой итерации (т.е. для каждой секции) вы рассчитаете значение высоты видимой части. Секция, для которой это значение будет наибольшим и будет считаться активной. Ну и по индексу этой секции вы можете назначить определенный класс любому нужному блоку.

[Сергей delphinpro]

Может возникнуть ситуация, когда две (три, четыре...) идущие подряд секции меньше высоты экрана и обе помещаются в область просмотра. У них процент видимости будет максимальный и одинаковый - 100. Тут уж вам решать, какую секцию назначить активной. Можно просто брать последнюю в списке, а можно разруливать отталкиваясь от направления скролла.

[Алекс Глебов]

Вам нужно подсветку пункта меню сделать при нахождении над его секцией? Если да, то это легко гуглится.

[Сергей]

Сергей: спасибо за разъяснения.

Алекс Глебов: нет, для меню не нужен разный класс использовать.