Bootstrap Navbar Fadeout после прокрутки Определенное расстояние

Question

Все, что я нашел до сих пор в сети, касается выцветания на маршрутной точке или пробеге x.

Однако мне нужно, чтобы мой навигатор исчезал после перемещения на определенное расстояние независимо от, где свиток начинается на странице.

До сих пор я получил, чтобы он исчезал и выходил только на действие прокрутки. Я играл с несколькими различными методами, наткнулся на здесь и на codepen, где я разместил код. Пока это лучший метод, хотя он чувствует себя глюком на мобильных устройствах. Я где-то читал этот код, однако его нельзя использовать для мобильных платформ.

Чтобы быть более объективным здесь, я хотел бы, чтобы навигатор исчезал при прокрутке на расстоянии 1/3 экрана ОТНОСИТЕЛЬНО начальной точки.

Ниже приведен код JS благодаря члену Tushar.

Полный рабочий код можно найти здесь: codepen.

var lastScrollTop = 0, delta = 5; 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 

     if(Math.abs(lastScrollTop - st) <= delta) 
      return; 

     if (st > lastScrollTop){ 
      // downscroll code 
      $(".navbar").fadeOut() 
     } else { 
      // upscroll code 
      $(".navbar").fadeIn(); 

     } 
     lastScrollTop = st; 
    }); 

Answer 1

Это больше обновление и лучшее «рабочее» решение, с которым я смог придумать.

• Использование .stop() похоже, устраняет некоторые из сбоев на мобильных платформах .
• Я добавил еще один оператор if, который заставляет навигационную панель появляться, когда значение x находится сверху. И когда за этим ставится старый код.

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

var lastScrollTop = 0, delta = 5; 
/*window.addEventListener("scroll", function()*/ 

$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 

    if(Math.abs(lastScrollTop - st) <= delta) 
    return; 

    if (st > lastScrollTop){ 
    // downscroll code 
    $(".navbar").stop().fadeOut('fast') 
    } else { 
    // upscroll code 
    $(".navbar").stop().fadeIn('fast'); 

    }if (window.scrollY < 500) { 
     $('.navbar').stop().fadeIn('fast'); 
    } 
    lastScrollTop = st; 
});