ウィンドウの幅が変更されたときにイベントリスナーを追加/削除する方法

Question

ウィンドウの幅が変更されたときにnavbarのアニメーションを作成するイベントリスナーを追加/削除する方法はありますか？

小さな画面（例：幅< 768）の場合→イベントリスナーがある場合は、それを削除してナビバーを一番上に固定します。スクロール時にアニメーションが表示されません。

大画面で→スクロール

<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> 

Answer 1

これには、JQuery off()メソッドを使用できます。むしろ、それは別の機能であなたのハンドラインライン場所を置くことよりも...

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

...そしてセレクタ限りそう...

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

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

のようなリスナーを取り付け、取り外し、イベント、およびハンドラは 'on'のように 'off'で完全に一致しますが、動作は削除されます。

More info @ JQuery。

希望に役立ちます。 :)

Answer 2

あなたはWindow.matchMedia()を使用することができたときにアニメーションを表示するには、イベントリスナーを追加します。 APIドキュメントはWindow.matchMedia()

です。互換性については、window.onresizeイベントを聞くことができます。

Answer 3

私は、画面幅を検出して、フォームの隠しフィールドにその値を設定するには、この操作を行います。

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

あなたは$（ウィンドウ）.width（）イベントリスナーを呼び出し、追加または削除することを使用することができますそれに応じてコード。

JQueryにはresize（）メソッドがあり、ユーザーがいつそのことを知ることができます。 https://www.w3schools.com/jquery/event_resize.asp