Как зафиксировать меню при скролле

/ 👁 1879

Сегодня рассмотрим один из способов зафиксировать меню при скролле.

Вариантов решения этой задачи может быть несколько. В этой статье я предлагаю лишь один из вариантов, для которого мы будем использовать 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 пикселей, то меню фиксируется вверху.

Надеюсь этот код вам поможет.

Leave a Reply