jQuery を使用してフッターをウィンドウのサイズ変更に応答できるようにするにはどうすればよいですか?

jQuery ウィンドウ サイズ変更イベント ハンドラー

提供された jQuery コードは、ページが最初に読み込まれるときのウィンドウの高さに基づいてフッター要素のスタイルを変更します。 。ただし、ウィンドウのサイズ変更中にスタイルが動的に適応するようにするには、イベント リスナーをウィンドウのサイズ変更イベントにバインドする必要があります。

jQuery ソリューション:

$(window).on('resize', function() {
  var $containerHeight = $(window).height();
  if ($containerHeight <= 818) {
    $('.footer').css({
      position: 'static',
      bottom: 'auto',
      left: 'auto'
    });
  }
  if ($containerHeight > 819) {
    $('.footer').css({
      position: 'absolute',
      bottom: '3px',
      left: '0px'
    });
  }
});

追加の考慮事項:

• CSS メディアの使用を検討してください画面の高さに基づいてスタイルを変更するだけの場合は、クエリを実行します。
• サイズ変更イベントの処理頻度を制限するには、Underscore や Lodash などのライブラリの debounce メソッドまたは throttle メソッドを調べます。
• 複数のバインドを避けてください。パフォーマンスの問題が発生する可能性があるため、ウィンドウのサイズ変更イベントに対するイベント ハンドラーは使用されません。

以上がjQuery を使用してフッターをウィンドウのサイズ変更に応答できるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。