Nav-Menü nach dem Scrollen anzeigen 50px

Question

Ich möchte ein sticky-Menü-nav anzeigen, wenn Sie hochscrollen und gleichzeitig eine Verzögerung haben, bevor Sie das nav-Menü anzeigen. Ich kann das mit Animation und Opazität machen, aber es ist nicht so effektiv.

Ich habe versucht, das Nav-Menü beim Hochscrollen von 50px von der aktuellen Position zu zeigen, aber es hat nicht funktioniert.

Hier ist das Skript:

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } 
    previousScroll = currentScroll; 
}); 

FIDDLE DEMO

Hinweis: Ich sah diese Funktion in das Skript für Headroom.js

Wie kann ich das tun?

Answer 1

Ihr aktuelles Setup berücksichtigt nur Scrolls, die größer als headerOrgOffset sind. Wenn die Folie heruntergefahren werden soll, müssen Sie Fälle berücksichtigen, in denen der Bildlauf weniger als headerOrgOffset ist. Da Sie auch einen Puffer 50px wollen, habe ich eine -50 in der Else-Anweisung hinzugefügt.

var previousScroll = 0, 
     savedScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
      reappearScroll = currentScroll - 50; 
     } else { 
      if (currentScroll < reappearScroll) { 
       $('#header-wrap').slideDown(); 
      } 
     } 
    } 
    previousScroll = currentScroll; 
});