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

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


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

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

  • 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
zular
  • Reputation: 36
  • Snippets : 7
  • Revisions : 0
Подписаться

Other revisions for snippet Sorted by rating


  Rating
0

Скрипт для фиксирования меню при скролле страницы Mar 15, 2016, 5:59:14 PM
Благодарю автора zular за данный скрипт. Хотел написать коммент, но нажал чтото не то :) В общем, чтобы класс таки удалялся, на 6 строке лучше сравнивать в виде ">" а не ">=" ибо в нашем случае $(window).scrollTop() всегда >= 0 Здравствуйте, столкнулся с задачей фиксации меню при скролле страницы, был найден скрипт на просторах интернета, который решил мою задачу. Я его немного изменил под свои нужды. Зависимости: * Jquery Классы: * **.nav-afix** - само меню * **.affix** - класс который добавляется в после скролла Преимущества скрипта: * не надо высчитывать отступ сверху (скрипт сам его отсчитывает) ```javascript // --- 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') }; }); }); ```

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

Регистрация