JQuery halten Div am unteren Bildschirmrand

In diesem Leitfaden wird erläutert, wie ein DIV oben oder unten auf dem Bildschirm mit JQuery festgelegt wird, in denen sich Situationen befassen, in denen Standard -CSS -Lösungen kurz vorgehen. Während CSS eine grundlegende Positionierung bietet, bietet JQuery eine robuste Lösung für die Aufrechterhaltung der Div -Position auch beim Scrollen.

CSS und JQuery -Lösungen

Hier ist ein CSS

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

Der entsprechende jQuery -Code:

// 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 });
}

Fortgeschrittene Techniken und FAQs

Ein JQuery -Plugin kann auch die Sichtbarkeit des Seitenleistenelements während des Scrollens beibehalten. Besprechen wir einige häufige Fragen:

F: Wie kann man einen Div am Bildschirm unten beim Scrollen mit jQuery? halten

Verwenden Sie

in CSS. Zum Beispiel: position: fixed

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

Ersetzen Sie

durch die ID Ihres Divs. #yourDiv

F: Wie finde ich eine DIV unter der unteren Position mit JQuery?

kombinieren

und offset(): height()

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

F: Warum aktualisiert nicht auf Scroll? position: absolute; bottom: 0;

Positionen relativ zum nächsten positionierten Vorfahren. Ohne einen verwendet es den Dokumentkörper und scrollen mit der Seite. Verwenden Sie position: absolute für die Bildschirmfixed-Positionierung. position: fixed

F: Wie bekomme ich mit JQuery die untere Position eines DIV unter dem Ansichtsfenster?

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

F: Wie kann man mit JQuery einen Div -Stick am Boden eines anderen Divs halten?

Verwenden Sie die Methode

: append()

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

Dieser erweiterte Handbuch enthält klarere Erklärungen und verbesserte Codeformatierung für eine bessere Lesbarkeit.

Das obige ist der detaillierte Inhalt vonJQuery halten Div am unteren Bildschirmrand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!