Как скрыть навигацию заголовка при прокрутке и показать, когда прокрутка остановлена

Question

У меня есть заголовок навигации (обычный тег заголовка HTML). Я хочу уменьшить его, когда пользователь прокручивает страницу вниз, но показать, когда пользователь прекращает прокрутку (после 1-секундной задержки).

Как я могу добиться этого с помощью jQuery? Это то, что я получил до сих пор:

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

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

Answer 1

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

1. Исчезните заголовок.
2. Сбросьте тайм-аут, если он задан в переменной t.
3. Установите тайм-аут на 1 секунду, действие, предпринятое после этого тайм-аута, должно исчезнуть в заголовке. снова.

Итак, каждый раз, когда перемещается одна точка прокрутки, вызывается событие, заголовок исчезает, и мы устанавливаем тайм-аут для отображения заголовка через 1 секунду, но до этого, если перемещается другая точка прокрутки, событиеснова позвони. и предыдущий таймер очищается. Это продолжается до тех пор, пока пользователь не прекратит прокрутку, а затем в последний раз функция не будет успешно выполнена и снова исчезнет в заголовке.

 $(function(){
      var t;
      document.addEventListener('scroll',function(e){
      	$("#Header").fadeOut(500);
          clearTimeout(t);
          checkScroll();
      });
      
      function checkScroll(){
          t = setTimeout(function(){
             $("#Header").fadeIn(500);
          },1000); /* You can increase or reduse timer */
      }
  });

html, body { height: 1200px; margin: 0; padding: 0; width: 100%; }
#Header { background: red; height: 100px; left: 0; position: fixed; top: 0; width: 100%; }
#Header table { height: 100%; width: 100%; }
#Body { background: grey; height: 200%; margin-top: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Header">
    <table>
        <tr>
            <th>H E A D E R bar</th>
        </tr>
    </table>
</div>
<div id="Body">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>

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

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

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");
      clearTimeout(t);
      checkScroll();
   }
       lastScrollTop = st;
    });

  function checkScroll(){
          t = setTimeout(function(){
             $("header").css("top","0px");
          },1000); /* You can increase or reduse timer */
  }
});  

Answer 2

Я получил следующий код:

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

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

Codepen: https://codepen.io/Canvasandcode/pen/bGGeWrj