Для получения полного доступа
зарегистрируйтесь.
Сниппет,  JavaScript

Скрипт для фиксирования меню при скролле страницы  


Благодарю автора zular за данный скрипт. Хотел написать коммент, но нажал чтото не то :) В общем, чтобы класс таки удалялся, на 6 строке лучше сравнивать в виде ">" а не ">=" ибо в нашем случае $(window).scrollTop() всегда >= 0

Здравствуйте, столкнулся с задачей фиксации меню при скролле страницы, был найден скрипт на просторах интернета, который решил мою задачу. Я его немного изменил под свои нужды.

Зависимости:

  • Jquery

Классы:

  • .nav-afix - само меню
  • .affix - класс который добавляется в после скролла

Преимущества скрипта:

  • не надо высчитывать отступ сверху (скрипт сам его отсчитывает)
// --- affix top menu script ---
$(() => {
    let target = $('.nav-afix');
    let startPosition = target.offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() > startPosition) {
            if (!target.hasClass()) {
                target.addClass('affix')
            };
        } else {
            target.removeClass('affix')
        };
    });
});

  jquery JavaScript affix menu

Автор


Gravatar image
avkvak
  • Репутация: 1
  • Сниппеты : 0
  • Ревизии : 1
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация