jQuery Keep Div en bas de l'écran

Ce guide explique comment garder une div fixe en haut ou en bas de l'écran à l'aide de jQuery, en abordant les situations où les solutions CSS standard sont en deçà. Alors que CSS offre un positionnement de base, jQuery fournit une solution robuste pour maintenir la position DIV même pendant le défilement.

CSS et JQuery Solutions

voici une approche CSS, ainsi qu'un callback jQuery pour la compatibilité des explorateurs Internet:

.bottom {
  position: fixed; /* Preferred method */
  position: absolute; /* IE fallback */
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

/* IE-specific fix */
.fixie {
  left: expression((-jsrp_related.offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
  top: expression((-jsrp_related.offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
}

Le code jQuery correspondant:

// Note:  A height property MUST be set for this to work correctly.
if ($.browser.msie) {
  div.css({ position: "absolute", width: jslide_width, right: 0, height: 100 });
  div.addClass('fixie');
} else {
  div.css({ position: "fixed", width: jslide_width, right: 0, height: 100 });
}

Techniques avancées et FAQ

Un plugin jQuery peut également maintenir la visibilité de l'élément de barre latérale pendant le défilement. Répondons à quelques questions courantes:

Q: Comment garder une div au bas de l'écran tout en faisant défiler en utilisant jQuery?

Utiliser position: fixed dans CSS. Par exemple:

$("#yourDiv").css("position", "fixed");
$("#yourDiv").css("bottom", "0");

Remplacer #yourDiv par votre ID de div.

Q: Comment trouver la position de fond d'une div avec jQuery?

combiner offset() et height():

var bottom = $("#yourDiv").offset().top + $("#yourDiv").height();

Q: Pourquoi n'est-ce pas position: absolute; bottom: 0; Mise à jour sur le défilement?

position: absolute Positions relatives à l'ancêtre positionné le plus proche. Sans un, il utilise le corps du document et fait défiler avec la page. Utilisez position: fixed pour le positionnement fixé à l'écran.

Q: Comment obtenir la position inférieure d'une div par rapport à la fenêtre à l'aide de jQuery?

var bottom = $(window).scrollTop() + $(window).height() - $("#yourDiv").offset().top;

Q: Comment faire respecter un div au bas d'un autre div en utilisant jQuery?

Utilisez la méthode append():

$("#parentDiv").append($("#childDiv"));

Ce guide amélioré fournit des explications plus claires et une mise en forme améliorée du code pour une meilleure lisibilité.

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!