JS-решения №5. Активный класс в меню при скролле

Привет! Иногда нужно сделать, чтобы пункты фиксированного меню "понимали", на какой секции вы находитесь, и подсвечивались. В этом видео я покажу, как это можно сделать на чистом JS. Вариант не то что бы супер идеальный, но тем не менее :)
clck.ru/PyQPW - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Моя группа по верстке сайтов: maxgraph
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#обучение #scroll #верстка

[@redlixdavidof235]

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

[@makona79li2]

Спасибо! Очень полезно.

[@maxgraph]

Пожалуйста)

[@xOceanSpirit]

Оптимизация выбросилась в окно)

[@PizekattoX]

Попробуй Intersection Observer API, там даже проще реализация и проц не грузит как scroll

[@maxgraph]

Посмотрю, спасибо)

[@romanf.5107]

Редкая функция, которую никто не раскрывает - автоскрол до активного пункта длинного горизонтального меню при прокрутке страницы...

[@olehivanov2380]

Спасибо! Единственный кто нормально сделал на чистом js.

[@maxgraph]

Пожалуйста)

[@nikdev8023]

Круто, люблю эту рубрику, для новичка очень полезно!)

[@maxgraph]

Спасибо))

[@fl1pp1x]

Спасибо, помог, а то плагины все сразу лепят....

[@candyman100]

Годнота!

[@maxgraph]

Спасибо)

[@SKINBOXPartner]

Спасибо большое, очень помог!

[@dmitriyzhukov4592]

Самый важный недостаток - это при обновлении страницы где-нибудь на середине, активные пункты меню сбиваются.

[@xOceanSpirit]

Что мешает код выполнить при загрузке страницы, а не только во время скролла?

[@igorlitvintsev2427]

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

[@maxgraph]

добавить переменную isAnimated = false проверять if ((тут проверка что доскроллили) && isAnimated == false) { запускаем анимацию isAnimated = true }

[@АлексейСоколов-у3к]

А если где-то секции а где-то обычные дивы? Как тут реализовать?

[@maxgraph]

Через классы

[@const1525]

А можно это как то улучшить? У тебя они подряд пункты меню, а что если они будут разбросаны и некоторые секции вообще помечать не надо.

[@maxgraph]

На данный момент решения не нашел. Но и не искал)

[@Yafef203345]

Мужик, дай бог тебе здоровья!

[@maxgraph]

Спасибо)

[@DSokoloko]

Большое спасибо) Отличный пример!

[@maxgraph]

Пожалуйста)

[@olegandrov267]

Спасибо за данный урок? А что если такое меню находится ниже топа? Например оно top:100px;

[@maxgraph]

Ну переписать придется скрипт)

[@olegandrov267]

@@maxgraph .clientHeight-110 это мне помогло

[@nikolayklimenko8319]

спасибо, очень помогло в обучении!)

[@maxgraph]

Пожалуйста)

[@wilezar4835]

Я правильно понимаю, что по сути каждый раз когда мы скролим, оставаясь в одной секции, мы сначала удаляем активный класс, а потом добавляем?

[@maxgraph]

Да

[@xOceanSpirit]

И это совсем неправильно и очень плохо) не в обиду автору, но это индусский код в самом натуральном виде.

[@wilezar4835]

@@xOceanSpirit насчёт степени ужаса не могу судить, ибо относительно новичок, но даже я понимаю что тут проблемы банально с логикой работы

[@osobennyu]

Спасибо за видео , есть нюанс , если высота секций меньше 100vh последний елемент меню не закраситься.

[@maxgraph]

Это да, есть такое

[@ОльгаЛеонтьева-ц3з]

@@maxgraph Здравствуй, Спасибо за видио, подскажи решение этой проблемы пожалуйста - когда секцию меньше 100vh?

[@alexidino]

Что говорит автор на 4:03

[@m.s.5610]

Потому, что они как бы являются "родителями" для ссылок.

[@truedivan]

смотрю codepen вот это для чего добавил? - window.innerWidth > 768

[@maxgraph]

Чтоб это работало выше 768 пикселей :)

[@truedivan]

@@maxgraph это понятно - а что если меньше? Не будет работать?

[@maxgraph]

Верно

[@serhiikorniichuk865]

Спасибо большое, полезно!

[@maxgraph]

Спасибо)