Warum geht meine Kopfzeile nicht zur ursprünglichen Position zurück?

Question

Ich habe ein Problem mit meinem Sticky Header. see here, wenn Sie 80 Pixel von oben scrollen, erhält die Kopfzeile die Klasse sticky-header hinzugefügt und wenn Sie zurück scrollen entfernt die Klasse und gehen Sie zurück zur ursprünglichen Position

Es scheint zu arbeiten, obwohl der Client zurückgekommen ist und sagte, dass es nicht funktioniert.

Aus irgendeinem Grund, wenn Sie nach unten und dann nach oben scrollen, scheint es den oberen Header zu ignorieren.

Nur js Code, den ich habe.

$(window).resize(addremoveclass()); 
$(window).scroll(addremoveclass()); 

function addremoveclass() { 
    if ($(window).width() < 1200) { 
     if($(this).scrollTop() >= 70) { // this refers to window 
      console.log("You've scrolled 80 pixels."); 
      $('#pageTemplate').addClass('stickypadding'); 
      $('header#header.header-sticky-mobile').css('top', '0px'); 
      $('header#header').addClass('header-sticky-mobile'); 
     } else if($(this).scrollTop() <= 69){ 
      $('#pageTemplate').removeClass('stickypadding'); 
      $('header#header').removeClass('header-sticky-mobile'); 
      $('header#header.header-sticky-mobile').css('top', '80px'); 
     } 
    } else { 
     if($(this).scrollTop() >= 70) { // this refers to window 
      console.log("You've scrolled 80 pixels."); 
      $('#pageTemplate').addClass('stickypadding'); 
      $('header#header.header-sticky-mobile').css('top', '0px'); 
      $('header#header').addClass('header-sticky-mobile'); 
     } else if($(this).scrollTop() <= 69){ 
      $('#pageTemplate').removeClass('stickypadding'); 
      $('header#header').removeClass('header-sticky-mobile'); 
      $('header#header.header-sticky-mobile').css('top', '80px'); 
     } 

    } 
} 

jede Hilfe würde sehr geschätzt werden.

Answer 1

Es passierte, wenn Sie in der Mitte der Seite aktualisieren.

hinzufügen $(this).scrollTop(0); zu Ihrem Dokument bereit als erstes:

wie:

$(document).ready(function(){ 
    $(this).scrollTop(0); 

    //..... 

});