Scroll Spy на JavaScript: Подсветка активного пункта меню при скролле | HTML CSS JS скачать в хорошем качестве

Scroll Spy на JavaScript: Подсветка активного пункта меню при скролле | HTML CSS JS

В этом видео мы дополним наше портфолио важным функционалом — Scroll Spy. Вы узнаете, как сделать так, чтобы пункты меню автоматически подсвечивались, когда пользователь доскролливает до соответствующей секции сайта. Это значительно улучшает UX и помогает пользователю ориентироваться в структуре страницы.    • Адаптивное портфолио веб-разработчика с ну...   Разбираем в уроке: ✅ Получение списка секций и ссылок через querySelectorAll. ✅ Отслеживание позиции скролла (window.scrollY). ✅ Логику переключения классов active с использованием циклов forEach. ✅ Настройку отступа (offset), чтобы подсветка менялась своевременно. 🕒 Тайм-коды: 00:00:00 - Обзор функционала: как работает подсветка меню при скролле 00:01:20 - Проверка текущего состояния проекта перед внесением правок 00:02:09 - JS: Создание переменных для секций (page) и ссылок (links) 00:02:42 - Разбор HTML-структуры: связь классов секций с навигацией 00:03:29 - Работа с событием scroll: получение текущей позиции scrollPosition 00:04:21 - Цикл по всем секциям сайта и определение их положения 00:04:48 - Условие для переключения: расчет offsetTop с учетом отступа (150px) 00:05:32 - Получение ID активной секции через getAttribute 00:06:13 - JS: Логика удаления класса active у всех ссылок и добавление актуальной 00:07:03 - Проверка совпадения href ссылки с текущим ID секции 00:08:07 - Финальное тестирование работы Scroll Spy на странице 00:08:29 - Заключение и итоги урока 🛠 Используемые технологии: ✅ HTML5 / CSS3 (используется готовая база портфолио) ✅ Vanilla JavaScript (циклы, условия, атрибуты элементов) Полезные материалы: 👉 Flexbox в CSS: Пошаговый курс:   / 1320002   👉 Frontend: лучшие ресурсы:   / 1752178   👉 Membership on Patreon:   / membership   👉 Весь плейлист «CSS с нуля для начинающих»:    • CSS уроки для начинающих с нуля: Полный курс   👉 Весь плейлист «HTML с нуля для начинающих»:    • HTML уроки для начинающих с нуля: Полный курс   Станьте патроном на Patreon и получите доступ к закрытым материалам, бонусным видео и архивам проектов: 👉   / topchiydev   Подписывайтесь на мой Telegram, где я делюсь фишками веб-разработки и эксклюзивными материалами: 👉 https://t.me/TopchiyDev Если вы нашли это видео полезным - ставьте лайк 👍, подписывайтесь на канал и жмите на колокольчик 🔔. Ваши комментарии и вопросы очень важны для меня - пишите, буду рад помочь! 😀 Спасибо за просмотр и до встречи в новых видео! #JavaScript #ScrollSpy #Frontend #ВебРазработка #HTML #CSS #JS #TopchiyDev #УрокиПрограммирования