Проблема при добавлении класса на основе ScrollTop() и использовании закрепления позиции для панели навигации. ⇐ Jquery

[Гость]

Я пытаюсь создать панель навигации, в которой отступы сжимаются, когда пользователь начинает прокручивать. Сжатие осуществляется простым добавлением класса к элементу заголовка при прокрутке и последующим изменением отступов в CSS.

Проблема, с которой я столкнулся, заключается в том, что когда я прокручиваю страницу примерно до 50 пикселей, где к toggleClass добавляется класс «shrink», он застревает в цикле, из-за чего панель навигации очень быстро переключается между двумя свойствами CSS. Это можно исправить, применив к элементу заголовка «position: fixy» вместо «sticky», однако в этом случае мне нужно использовать «position:sticky».

$(window).on("scroll touchmove", function() { $('header').toggleClass('shrink', $(document).scrollTop() > 50); }); body { заполнение: 0; маржа: 0; } заголовок { фон: красный; положение: липкое; верх: 0; отступ: 50 пикселей 0; } заголовок.shrink { отступ: 10 пикселей 0; } .nav-контейнер { максимальная ширина: 1400 пикселей; маржа: 0 авто; фон: зеленый; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; } .logo { заполнение: 0; маржа: 0; дисплей: блок; } навигация ул { стиль списка: нет; фон: оранжевый; дисплей: гибкий; } основной { максимальная ширина: 1400 пикселей; маржа: 0 авто; } основной .контейнер { фон: RGB(34, 193, 195); фон: линейный градиент (180 градусов, rgba (34, 193, 195, 1) 0%, rgba (253, 187, 45, 1) 100%); минимальная высота: 6000 пикселей; Логотип [*]Главная [*]О компании [*]Контакт Содержание

Нажмите здесь, чтобы увидеть пример кода