Скролл элемента .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');

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

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

Решение

Решение

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

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	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