Else-Anweisung von Javascript-Menü, das auf Scroll funktioniert nicht geändert

Question

So habe ich dieses Menü, das ändert, wenn Sie den ersten Teil der Seite scrollen (ich nannte es "Banner") und in seiner ansprechenden Form ändert sich zu einem typischen Toggle Bar, wo das Menü herunterrutscht.

<header class="ease"> 
    <div class="menu-toggle"><img src="imgs/vap-designs-logo-black.svg" class="logo" alt="Vap Designs - Logotype" /></div> 
    <a href="index.html"><img src="imgs/vap-designs-logo.svg" class="logo" alt="Vap Designs - Logotype" /></a> 
    <nav> 
     <ul> 
      <li><a href="about.html" class="menu">about</a></li> 
      <li><a href="graphic.html" class="menu">graphic</a></li> 
      <li><a href="video.html" class="menu">video</a></li> 
      <li><a href="contact.html" class="menu">contact</a></li> 
     </ul> 
    </nav> 
</header> 

Ich benutze Javascript, um seine CSS-Eigenschaften zu ändern, wenn der Benutzer die Größe des Fensters ändert. Die Klasse 'header-white' ändert die Hintergrundfarbe und die Höhe der Kopfzeile (ich bevorzuge dies, anstatt nur die Eigenschaften über Javascript hinzuzufügen). Der Punkt ist, dass ich möchte, dass mein Header dauerhaft die Klasse "Header-weiß" hat, wenn das Fenster weniger als 768 Pixel breit ist. Es scheint bis zu dem Moment zu funktionieren, in dem Sie nach oben oder unten scrollen, wenn es sich ändert, obwohl es in der else-Anweisung nicht dafür angegeben ist.

Dies ist das Skript:

$(window).resize(function() { 
    h = $('.banner').height(); 

    if ($(window).width() > 768) { 

     $('nav').css({'display' : 'block'}); 
     $('header').removeClass('toggle-white'); 

     if ($(document).scrollTop() > h) { 
      $('header').addClass('header-white'); 
      $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg'); 
     } else { 
      $('header').removeClass('header-white'); 
      $('header > a img').attr('src', 'imgs/vap-designs-logo.svg'); 
     } 

     $(window).on('scroll', function(){ 
      if ($(window).scrollTop() >= h){ 
       $('header').addClass('header-white'); 
       $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg'); 
      } else { 
       $('header').removeClass('header-white'); 
       $('header > a img').attr('src', 'imgs/vap-designs-logo.svg'); 
      } 
     }); 
    } else { 
     $('nav').hide(); 
     $('header').addClass('header-white'); 
    } 
}).resize(); 

Answer 1

Sie müssen die ‚blättern‘ Handler in dem anderen Teil zu entfernen, sonst wird es noch einmal ausgelöst, wenn der ursprüngliche Zustand nicht erfüllt ist. Sie können das tun, wie folgt:

$(window).off('scroll')

(oder, wenn Sie mehrere Scroll-Handler haben, die Funktion in einer Variablen speichern und sowohl .on passieren und .off)