Панель навигации при прокрутке – это важный элемент веб-сайта, который облегчает пользователям навигацию по странице. Она позволяет быстро переходить между разделами сайта, даже когда страница довольно длинная. В этой статье мы рассмотрим, как создать панель навигации при прокрутке с использованием HTML, CSS и JavaScript, а также предоставим два примера: один с использованием чистого кода, и другой с использованием Bootstrap.
Что такое панель навигации при прокрутке
Панель навигации при прокрутке – это элемент интерфейса веб-страницы, который обычно закрепляется наверху или внизу страницы и содержит ссылки на различные разделы сайта. Когда пользователь прокручивает страницу, эта панель остается видимой, позволяя быстро перейти к интересующему разделу. Это удобно и улучшает пользовательский опыт.
Делаем на JS

- Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
- Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
- Что ждет рынок программирования и почему мы решили сюда пойти
Для создания панели навигации нам понадобятся три основных компонента: HTML для разметки, CSS для стилей и JavaScript для добавления интерактивности. Давайте начнем с чистой реализации.
- HTML:
Создайте структуру HTML для вашей страницы. Включите элементы, которые вы хотите добавить. Вот пример базовой разметки:
«`html
<!DOCTYPE html> <html> <head> <title>Панель навигации при прокрутке</title> </head> <body> <header> <nav> <ul> <li><a href=»#section1″>Раздел 1</a></li> <li><a href=»#section2″>Раздел 2</a></li> <li><a href=»#section3″>Раздел 3</a></li> </ul> </nav> </header> <section id=»section1″> <!— Содержимое раздела 1 —> </section> <section id=»section2″> <!— Содержимое раздела 2 —> </section> <section id=»section3″> <!— Содержимое раздела 3 —> </section> </body> </html> «` |
- CSS:
Добавьте стили CSS:
|
- JavaScript:
Теперь добавьте JavaScript для создания эффекта прокрутки. Когда пользователь прокручивает страницу, активный раздел будет подсвечен в навигации. Вот пример JavaScript-кода:
«`javascript
// Выбираем все разделы и ссылки const sections = document.querySelectorAll(‘section’); const navLinks = document.querySelectorAll(‘nav a’); // Функция, которая проверяет, какой раздел виден в окне просмотра function updateNavigation() { sections.forEach((section, index) => { const rect = section.getBoundingClientRect(); if (rect.top <= 100 && rect.bottom >= 100) { navLinks[index].classList.add(‘active’); } else { navLinks[index].classList.remove(‘active’); } }); } // Слушаем событие прокрутки страницы и обновляем навигацию window.addEventListener(‘scroll’, updateNavigation); // Инициализируем навигацию при загрузке страницы updateNavigation(); «` |
- CSS для подсветки активной ссылки:
Добавьте стилизацию для активной ссылки:
«`css
nav a.active { font-weight: bold; } «` |
Теперь, когда пользователь будет прокручивать страницу, активная ссылка в панели навигации будет подсвечиваться, указывая на текущий раздел.
Пример с использованием Bootstrap
Если вы предпочитаете использовать Bootstrap для быстрой и простой реализации панели навигации при прокрутке, вот как это можно сделать:
- HTML:
Используйте Bootstrap для создания структуры HTML. Вам понадобится загрузить Bootstrap CSS и JavaScript на вашу страницу. Вот пример разметки:
«`html
<!DOCTYPE html> <html> <head> <title>Панель навигации при прокрутке с Bootstrap</title> <!— Подключаем Bootstrap CSS и JavaScript —> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»> <script src=»https://code.jquery.com/jquery-3.5.1.slim.min.js»></script> <script src=»https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script> </head> <body> <nav class=»navbar navbar-expand-lg navbar-light bg-light»> <div class=»container»> <a class=»navbar-brand» href=»#»>Логотип</a> <button class=»navbar-toggler» type=»button» data-toggle=»collapse» data-target=»#navbarNav» aria-controls=»navbarNav» aria-expanded=»false» aria-label=»Toggle navigation»> <span class=»navbar-toggler-icon»></span> </button> <div class=»collapse navbar-collapse» id=»navbarNav»> <ul class=»navbar-nav ml-auto»> <li class=»nav-item»> <a class=»nav-link» href=»#section1″>Раздел 1</a> </li> <li class=»nav-item»> <a class=»nav-link» href=»#section2″>Раздел 2</a> </li> <li class=»nav-item»> <a class=»nav-link» href=»#section3″>Раздел 3</a> </li> </ul> </div> </div> </nav> <section id=»section1″> <!— Содержимое раздела 1 —> </section> <section id=»section2″> <!— Содержимое раздела 2 —> </section> <section id=»section3″> <!— Содержимое раздела 3 —> </section> </body> </html> «` |
- JavaScript:
Bootstrap автоматически добавляет функциональность для плавной прокрутки к секциям. Вам не потребуется дополнительный JavaScript для этого.
Заключение
Создание панели навигации при прокрутке с использованием HTML, CSS и JavaScript – это отличный способ улучшить навигацию на вашем веб-сайте. Пользователи будут легче находить интересующие их разделы, что повысит удовлетворенность вашим сайтом. Вы можете выбрать между чистой реализацией и использованием Bootstrap в зависимости от ваших предпочтений и требований проекта.
- Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Создай и прокачай собственного чат-бота
- Подарим подборку бесплатных инструментов для написания кода