Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Прилипающее меню (https://javascript.ru/forum/events/69693-prilipayushhee-menyu.html)

PavelRem 12.07.2017 18:50

Прилипающее меню
 
Меню располагается на высоте 200px от начала страницы. Нужно сделать так, чтоб меню прилипало к вершине страницы, когда страница проскролится ниже отметки в 200px. И само собой, откреплялось если скролить в обратную сторону.
Набросал функцию:
$(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() >= 200) {
            $('.navbar').addClass('navbar-fixed-top');
            $('body').css("padding-top", "70px");
        }
        else{
            $('.navbar').removeClass('navbar-fixed-top');
            $('body').css("padding-top", "0px");
        }
    });
});

Все работает, но есть проблема - функция выполняется ПОСТОЯННО при событии скрола.
Как это сделать правильно? Подскажите пожалуйста.

рони 12.07.2017 19:22

Цитата:

Сообщение от PavelRem
функция выполняется ПОСТОЯННО

от этого не избавится, но можно сделать триггер и вносить изменения только в момент пересечения scrollTop() >= 200, второй вариант реагировать с задержкой.
debounce

PavelRem 12.07.2017 21:03

Цитата:

Сообщение от рони (Сообщение 458335)
можно сделать триггер и вносить изменения только в момент пересечения
debounce

Как ловить момент пересечения?

рони 12.07.2017 21:45

фиксация меню
 
PavelRem,
проверьте
$(function(){
    var flag = true;
    $(window).scroll(function() {
        if($(this).scrollTop() >= 200 && flag) {
            $('.navbar').addClass('navbar-fixed-top');
            $('body').css("padding-top", "70px");
            flag = !flag;
        }
        else if($(this).scrollTop() < 200 && !flag){
            flag = !flag;
            $('.navbar').removeClass('navbar-fixed-top');
            $('body').css("padding-top", "0px");
        }
    }).trigger("scroll");
 });

StartGames 24.04.2020 16:26

спасибо, работает


Часовой пояс GMT +3, время: 20:44.