Скролл элемента .scroll() + событие

@Black_Star · Регистрация: 06.05.2016

Студворк — интернет-сервис помощи студентам

Добрый день уважаемые. Подскажите пожалуйста как реализовать такую штуку - Есть в хедере менюшка с навигацией, когда пользователь опускается ниже этой менюшки, к ней применяется новый CSS стиль, со свойством position: fixed; и теперь данная навигация торчит у пользователя слева от экрана. Когда пользователь откручивает страницу вверх, свойство убирается.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  $navigationTop - див с менюшкой
  navMob - применяемый CSS класс
  buttonNav - кнопка (скрывающая/показывающая меню)
 
        function scrollNav() {
                $(window).scroll(function () {
 
                        var coord = $navigationTop.offset().top + $navigationTop.height();
 
                        if ($navigationSite.hasClass('navMob') && $(window).scrollTop() < coord) {
 
                                        buttonNav.css({display: 'none'});
                                        navBar.show();
                                        $navigationSite.toggleClass('navMob');
                        }
                        else if ($(window).scrollTop() > coord) {
                                buttonNav.css({display: 'block'});
                                navBar.hide();
                                $navigationSite.toggleClass('navMob');
                        }
 
                });
 
        }
 
        scrollNav();

В принципе оно работает, но только по причине того что мы постоянно обращаемся к DOM моя странница постоянно провисает. Умные люди предлагали сделать «тормозилку», которая возвращает обёртку, передающую вызов скролла не чаще, чем раз в 100ms миллисекунд, но как то у меня с этим туго. Может кто-то помочь ?

@sad67man · 18.12.2016, 03:26

Можно максимально ускорить выполнение скрипта.
Что можно сделать.
Вместо нескольких действий разным элементам я бы предложил просто добавлять или удалять 1 класс к примеру к body (menu-fixed какой-нибудь), остальное перенести на css. Избавиться от лишних проверок и вообще действий. Зачем вы проверяете на существование класса? Вы сначала делаете проверку <, а затем на > при этом 2 раза создается jquery объект $(window) и вызываются методы .scrollTop(); Создание объекта $(window) вынесите в переменную за пределы функции. Ну и вообще подумайте что можно сделать. Может что-то и на чистом js прописать.

Добавлено через 24 минуты
"Тормозилку" можно сделать так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function() {
  var isBlocked = false;
  $(window).scroll(function() {
    if (isBlocked) {
        return true;
    }
    isBlocked = true;
    setTimeout(funtcion() {
      
      //ваш код
      
      isBlocked = false;
    }, 100);
  });
})();

Добавлено через 23 минуты
Если понадобится еще что-нибудь добавить, чтоб не создавать кучу таймаутов, можно сделать так.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(){
  var block = false;
  var $window = $(window).scroll(function(){
    if (block) {
        return false;
    }
    block = true;
    setTimeout(function() {
      $window.trigger('slowscroll');
      block = false;
    }, 100);
  });
})();
 
$(window).on('slowscroll', function(){
    console.log(1);
})
$(window).on('slowscroll', function(){
    console.log(2);
})

@Black_Star · 18.12.2016, 14:23 **[ТС]**

К сожалению, ни смог понять как это дело работает. Где оно отслеживает что пользователь проскролил страницу, и объект больше не видел им?

@sad67man · 18.12.2016, 20:55

Black_Star, Нигде, эта "тормозилка" просто при скролле тригерит событие "slowscroll" (название я сам придумал) с периодичностью в 100ms. А дальше вы уже пишите ваш код, вешая функцию на это событие, а не на scroll

JavaScript
1
$(window).on('slowscroll', function(){

. Вообще это нужно смотреть сайт, чтоб написать оптимальный код. Все предложения я написал выше. К примеру вы можете указать вручную величину, на которую нужно прокрутить страницу, чтобы меню не было видно. Это будет быстрее работать, соответственно, меньше будет тормозов.

@Lazy_Den · 19.12.2016, 04:26

Сообщение от Black_Star

Умные люди предлагали сделать «тормозилку»

А чего же умные люди не рассказали, как это сделать?

Сообщение от Black_Star

мы постоянно обращаемся к DOM

Судя по вашему коду, у вас нет постоянного обращения к DOM-элементам, т.к. вы их кешируете, что является верным решением. Однако, лишний код всё-таки наблюдается. Во-первых, уберите лишние расчеты из обработчика события, а не производите их внутри него. Позиция, при которой должны выполнятся определенные действия, вычисляется один раз при загрузке страницы и, если предусмотрена адаптивная верстка, то при событии "resize". Кстати говоря, для последнего действия, отложенное выполнение сценария (то, что вы назвали "тормозилкой") очень даже пригодится.
Пример в песочнице.
Emmet разметки для кода ниже: .wrapper>header>.content_top+nav>ul>li{Item $}*5

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var nav = $('nav'),
    navPosTop = 0,
    timer;
$(window).on({
    scroll: function() {
        nav[$(this).scrollTop() > navPosTop ? 'addClass' : 'removeClass']('fixed');
    },
    resize: function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            console.log('action');
            navPosTop = nav.offset().top;
        }, 200);
    }
}).resize();

А вот для вашей задачи, отложенное выполнение может и не подойти, т.к. можем получить достаточно неприглядную картину. Пример того, как бы я не стал делать.

@Black_Star · 19.12.2016, 13:13 **[ТС]**

Спасибо, за помощь, это помогло. А можете ещё объяснить как работает данный метод

JavaScript
1
2
3
4
5
6
7
resize: function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            console.log('action');
            navPosTop = nav.offset().top;
        }, 200);
    }

Что-то я пока не встречался с таким синтаксисом " () => { } "

@Lazy_Den · 19.12.2016, 14:05

Сообщение от Black_Star

как работает данный метод

При срабатывании события resize, устанавливается таймер на 200мс. Если пользователь продолжает изменять размер и время между событиями не превышает 200мс, то предыдущий таймер останавливается и запускается новый. Если же изменение размера окна прекратилось или же пауза между событиями превысил превысила установленное время задержки, то выполняется дальнейший сценарий.

Сообщение от Black_Star

не встречался с таким синтаксисом " () => { } "

Это синтаксис "стрелочных функций" из ES-2015 (ES6). Тут он не принципиально важен, просто на автомате так написал.

@sad67man · 19.12.2016, 14:39

Lazy_Den, Я бы еще $(this) вынес)

@Black_Star · 20.12.2016, 13:44 **[ТС]**

Спасибо, за пояснения.
Ещё вопрос. Я Ваш пример установил к себе на страницу, но оно работает не совсем корректно, если обновить страницу в тот момент когда навигация не с верху страници, то она исчезает. Можете подсказать как решить что б состояние сохранялось?
https://github.com/BlackStar1991/Modelling-agency

Фаил js/script_aency.js строки с 1 по 54

@sad67man · 20.12.2016, 14:05

Black_Star,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var $nav = $('nav'),
    navPosTop = 0,
    timer;
var $window = $(window).on({
    scroll: function() {
        $nav.toggleClass('fixed', $window.scrollTop() > navPosTop);
    },
    resize: function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            console.log('action');
            navPosTop = $nav.offset().top;
        }, 200);
    }
}).resize().scroll();

Нужно стригерить событие скролла при загрузке страницы.

@Black_Star · 20.12.2016, 14:59 **[ТС]**

Сообщение от sad67man

$nav.toggleClass('fixed', $window.scrollTop() > navPosTop);

По-моему данная строка не может сработать. Нету классов, $window.scrollTop() > navPosTop, или я что-то путаю ?

@sad67man · 20.12.2016, 15:37

Black_Star, в функцию toggleClass() можно передать вторым параметром булево значение (true/false). Соответсвенно, если true, то сработает addClass(), если false, то removeClass(); По сути это является полным аналогом

JavaScript
1
nav[$(this).scrollTop() > navPosTop ? 'addClass' : 'removeClass']('fixed');

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

Скролл элемента .scroll() + событие

Решение

Решение

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
	18.12.2016, 14:23 [ТС]
	К сожалению, ни смог понять как это дело работает. Где оно отслеживает что пользователь проскролил страницу, и объект больше не видел им? 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	19.12.2016, 14:39
	Lazy_Den, Я бы еще $(this) вынес) 0

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
	20.12.2016, 13:44 [ТС]
	Спасибо, за пояснения. Ещё вопрос. Я Ваш пример установил к себе на страницу, но оно работает не совсем корректно, если обновить страницу в тот момент когда навигация не с верху страници, то она исчезает. Можете подсказать как решить что б состояние сохранялось? https://github.com/BlackStar1991/Modelling-agency Фаил js/script_aency.js строки с 1 по 54 0