Comment puis-je rendre mon pied de page réactif au redimensionnement de la fenêtre à l'aide de jQuery ?

Gestionnaire d'événements de redimensionnement de fenêtre jQuery

Le code jQuery fourni modifie les styles de l'élément de pied de page en fonction de la hauteur de la fenêtre lors du premier chargement de la page . Cependant, pour garantir que les styles s'adaptent dynamiquement lors du redimensionnement de la fenêtre, nous devons lier un écouteur d'événement à l'événement de redimensionnement de la fenêtre.

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

Considérations supplémentaires :

• Envisagez d'utiliser des requêtes multimédias CSS si vous avez uniquement l'intention de modifier les styles. en fonction de la hauteur de l'écran.
• Pour limiter la fréquence de gestion des événements de redimensionnement, explorez les méthodes anti-rebond ou d'accélération à partir de bibliothèques comme Underscore ou Lodash.
• Évitez de lier plusieurs gestionnaires d'événements à l'événement de redimensionnement de la fenêtre, car cela peut entraîner des problèmes de performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!