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

Что такое панель навигации при прокрутке

Панель навигации при прокрутке – это элемент интерфейса веб-страницы, который обычно закрепляется наверху или внизу страницы и содержит ссылки на различные разделы сайта. Когда пользователь прокручивает страницу, эта панель остается видимой, позволяя быстро перейти к интересующему разделу. Это удобно и улучшает пользовательский опыт.

Делаем на JS

Для создания панели навигации нам понадобятся три основных компонента: 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:

«`css

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

header {

background-color: #333;

color: #fff;

position: fixed;

top: 0;

left: 0;

right: 0;

}

nav ul {

list-style: none;

padding: 0;

display: flex;

}

nav li {

margin: 0 20px;

}

nav a {

text-decoration: none;

color: #fff;

}

section {

padding: 50px;

}

«`
  • 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 в зависимости от ваших предпочтений и требований проекта.

Записаться на бесплатный вебинар