Сегодня рассмотрим один из способов зафиксировать меню при скролле.
Вариантов решения этой задачи может быть несколько. В этой статье я предлагаю лишь один из вариантов, для которого мы будем использовать javascript.
Для примера создадим самую простую html страницу с полоской меню сверху. Заполню ее текстовым контентом, чтобы можно было увидеть эффект фиксации меню при скролле.
Код html-страницы:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Title</title> </head> <body> <main> <nav class="fix-nav"> <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> <li>Punkt 4</li> <li>Punkt 5</li> </ul> </nav> <div class="content"> Здесь контент </div> </main> <script type="text/javascript" src="js.js"></script> </body> </html>
Контент я специально убрала из примера кода, чтобы он не выглядел слишком громоздко.
Сверху подключаю файл стилей и библиотеку jQuery.
Css файл содержит простые стили (просто, чтобы страница выглядела более или менее нормально).
Содержимое файла style.css
* { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100%; } main{ margin: 0 auto; } nav.fix-nav{ background-color: cadetblue; width: 100%; } nav.fix-nav ul{ display: flex; justify-content: space-evenly; align-items: center; list-style-type: none; text-transform: uppercase; margin-top: 0; margin-bottom: 0; height: 40px; font-family: Arial; } .content{ padding: 50px 100px; font-size: 18px; background-color: aliceblue; font-family: Arial; max-width: 1280px; margin: 0 auto; }
На выходе получаю следующее:
Теперь самое главное. Наш javascript код.
Перед закрывающим тегом body мы подключили файл js.js, в котором нужно прописать следующее:
let isScroll = 0, // доп. проверка targetScroll = 40; // расстояние до действия / в px $(window).on('scroll', function () { if (isScroll === 0 && $(this).scrollTop() >= targetScroll) { isScroll = 1; $('.fix-nav').css({'position': 'fixed', 'top': '0px', 'width': '100%'}); } else if (isScroll === 1 && $(this).scrollTop() < targetScroll) { isScroll = 0; $('.fix-nav').css({'position': 'relative', 'top': '0'}); } });
Во второй строке кода мы указываем через какое количество пикселей мы хотим фиксировать меню. Наше меню в высоту 40 пикселей, поэтому значение – 40.
Далее при помощи флагов и условий мы присваиваем элементу меню те или иные стили, то есть либо фиксируем его, либо возвращаем обратно.
Вот и всё. Теперь, если мы проскролим 40 пикселей, то меню фиксируется вверху.
Надеюсь этот код вам поможет.