Hinzufügen/Entfernen von Ereignis-Listener bei Änderung der Fensterbreite

Gibt es eine Möglichkeit, einen Ereignis-Listener hinzuzufügen/zu entfernen, der eine Animation für die Navigationsleiste erstellt, wenn sich die Fensterbreite ändert?Hinzufügen/Entfernen von Ereignis-Listener bei Änderung der Fensterbreite

Wenn in einem kleinen Bildschirm (z. B. Breite < 768) → Wenn es einen Ereignis-Listener gibt, entfernen Sie es und reparieren Sie die Navigationsleiste an der Spitze. Beim Scrollen wird keine Animation angezeigt.

wenn sie in großen Bildschirm → einen Ereignis-Listener hinzufügen, Animation anzuzeigen, wenn Scroll

<div id="page-header"> 
<nav class="navbar"> </nav> 
</div> 

<script> 
    var flag = true; 
    $(window).on('scroll', function() { 
     if ($(window).scrollTop() > 54 && flag ==true) { 
      console.log('Event Fired'); 
      $('#page-header nav').css({ 
       'position': 'fixed', 
       'top': '-54px', 
       'width': '100%', 
       'z-index': '1000' 
      }) 
      .animate({ 
       top: '+=54px' 
      }, 500); 
      flag = false; 
     } else if ($(window).scrollTop() === 0) { 
      $('#page-header nav').css({ 
       'position': 'relative' 
      }); 
      flag = true; 
     } 
    }); 

</script>

Quelle

2017-09-29 Akito

Sie können dafür die Methode JQuery off() verwenden. Anstatt Ihre Handler Inline es in einer separaten Funktion platzieren ...

function eventHandler(e) { 
    /* ... do something ... */ 
}

... und dann befestigen und Hörer entfernen wie so ...

/* attach */ 
$('selector').on('event', eventHandler); 

/* remove */ 
$('selector').off('event', eventHandler);

Solange die Wähler, die Ereignis und der Handler sind eine genaue Übereinstimmung in der "aus" wie in der "on" das Verhalten wird entfernt.

More info @ JQuery.

Hoffnung, das hilft. :)

Quelle

2017-09-29 12:49:32

Ich habe keine Ahnung, warum es nicht mehr funktioniert, wenn ich den Handler in einer separaten Funktion platzieren ... Und weil der Selektor Fenster ist, wird es nicht entfernen das andere Bildlaufereignis bei Verwendung von .off() -Methode ? – Akito

Oh, jetzt weiß ich, dass ich optionale Namespaces hinzufügen kann, um Ereignisse spezifisch zu machen. – Akito

habe herausgefunden, dass meine separate Funktion wegen der Klammer, die ich nach der Handler-Funktion hinzugefügt habe, nicht funktioniert. Ein anderes Problem ist hier, wenn von "aus" auf "an" geschaltet wird, manchmal funktioniert es nicht. Es ist instabil. – Akito

Sie die Window.matchMedia() verwenden können. Das API-Dokument lautet Window.matchMedia()

oder für die Kompatibilität können Sie das Ereignis window.onresize zuhören.

Quelle

2017-09-29 12:47:03 sinbar

Ja. Ich versuche, jQuery resize() zu verwenden und muss einen Weg finden, um festzustellen, ob es schon einen Event-Handler gibt. Weil ich nicht will, fügen Sie den Handler jedes Mal, wenn die Größe des Fensters geändert wird. – Akito

jQuery externe api nicht unterstützen finden ein binded Ereignis, vielleicht kann eine interne Funktion das tun, aber das ist nicht stabil. Ich schlage über einen einfachen Weg vor: '$ (window) .unbind ('event'). On ('event', function() {})' – sinbar

Ich benutze eine boolesche Variable, um den Zustand des Ereignisses zu verfolgen und es funktioniert jetzt. Danke für die Antwort. :) – Akito

ich dies tun Bildschirmbreite zu erfassen und diesen Wert in einer Form verstecktes Feld gesetzt:

$(function() { 
    var screenwidth = $(window).width(); 
    $('#screenwidthinput').val(screenwidth); 
});

Sie könnten, dass $ verwenden (Fenster) .width() -Aufruf und hinzufügen oder die Ereignis-Listener entfernen entsprechend codieren.

Und JQuery hat resize() -Methode, so dass Sie wissen, wann der Benutzer es tut. https://www.w3schools.com/jquery/event_resize.asp

Quelle

2017-09-29 13:30:31 Nic3500

Hinzufügen/Entfernen von Ereignis-Listener bei Änderung der Fensterbreite

Antwort

Verwandte Themen