How Can I Make My Footer Responsive to Window Resizing Using jQuery?

jQuery Window Resize Event Handler

The provided jQuery code modifies the styles of the footer element based on the window height when the page first loads. However, to ensure the styles adapt dynamically during window resizing, we need to bind an event listener to the window resize event.

jQuery Solution:

$(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'
    });
  }
});

Additional Considerations:

• Consider using CSS media queries if you only intend to modify styles based on screen height.
• To limit the frequency of resize event handling, explore the debounce or throttle methods from libraries like Underscore or Lodash.
• Avoid binding multiple event handlers to the window resize event as it can lead to performance issues.

The above is the detailed content of How Can I Make My Footer Responsive to Window Resizing Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!