Как сделать так, чтобы навигация по прокрутке изменялась плавно и без перебоев? - PullRequest
Новая
       25

Как сделать так, чтобы навигация по прокрутке изменялась плавно и без перебоев?

0 голосов
/ 03 сентября 2018

Мне нужно создать фиксированное меню, которое должно менять свой фон (с эффектом сползания вниз) после определенного верхнего значения прокрутки. Он должен иметь следующие функции:
(1) сверху должен быть черный фон
(2) Он должен перейти на светлый фон в определенной точке после прокрутки вниз и вернуться к темному фону при прокрутке вверх выше определенной точки
(3) После перехода на светлый фон темный фон должен быть прозрачным с задержкой, чтобы переход между двумя фонами выглядел плавно
ПРИМЕЧАНИЕ. Я никак не могу скрыть первый (темный) заголовок (я имею в виду непрозрачность, отображение, видимость и т. Д.).
Все работает нормально, но я столкнулся с двумя проблемами:
(1) Фон не всегда темный после прокрутки вверх
(2) Во время перехода от светлого к темному мигает прозрачный фон
Что вызывает такие проблемы? Что я делаю неправильно? Вот мой код: 

var animatedScroll = false;
jQuery(window).scroll(function(){
if (!animatedScroll) {
    animatedScroll = true;
    if  (jQuery(window).scrollTop() >= 300 && jQuery(window).scrollTop() != 0){
        jQuery('#main-header').delay(300).queue('fx', function() { jQuery(this).addClass('transp_bg').dequeue(); });
        jQuery('.menu_light').stop().animate({"top":"0"},250, function(){
            animatedScroll = false;
        });
    } else {
        jQuery('.txt').attr("style","");
        jQuery('#main-header').removeClass('transp_bg');
        jQuery('.menu_light').stop(true).animate({"top":"-150px"},250, function(){
            animatedScroll = false;
        });
    }
 }
});

Вот jsfiddle:
https://jsfiddle.net/xpvt214o/726346/
Я использую jQuery вместо знака $, поскольку я должен сделать это в среде Wordpress.
Заранее благодарю за помощь!

...