JQuery-Einstellungen CSS oben

Titel: Beherrschen Sie das Top-Attribut beim Festlegen von CSS-Attributen in jQuery

Als Front-End-Entwickler ist es sehr wichtig, die Fähigkeiten des jQuery-Betriebs von DOM-Elementen zu beherrschen. Unter diesen ist das Festlegen von CSS-Eigenschaften einer der grundlegendsten und am häufigsten verwendeten Vorgänge. Dieser Artikel konzentriert sich auf die Verwendung von jQuery zum Festlegen des obersten Attributs in CSS-Attributen.

1. Was ist das Top-Attribut? In CSS ist das Top-Attribut eine Methode zum Festlegen der Position eines Elements relativ zum oberen Rand seines übergeordneten Elements. Normalerweise wird der Attributwert in Pixel (px) angegeben und der Wertebereich ist negativ, 0 und positiv. Wenn der obere Wert beispielsweise 10 Pixel beträgt, bedeutet dies, dass das Element relativ zum oberen Rand seines übergeordneten Elements um 10 Pixeleinheiten nach unten versetzt ist.

2. Wie jQuery das CSS-Top-Attribut festlegt

jQuery bietet einige Methoden, mit denen die CSS-Attribute von Elementen festgelegt werden können. Darunter gibt es zwei Möglichkeiten, das Top-Attribut festzulegen: die Methode .css() und die Methode .animate().

Verwenden Sie die .css()-Methode

1. .css()-Methode, um die CSS-Eigenschaften des Elements direkt festzulegen.

Das Syntaxformat lautet wie folgt:

$(selector).css(property,value)

Unter diesen stellt die Eigenschaft die festzulegende CSS-Eigenschaft dar und der Wert den festzulegenden Attributwert.

Zum Beispiel kann der folgende Code das Top-Attribut der Element-ID auf myDiv setzen:

$("#myDiv").css("top", "10px");

Verwenden Sie .animate() Methode

2. Die Methode .animate() wird verwendet, um den Animationseffekt des Elements festzulegen. Das Festlegen des Top-Attributs eines Elements kann auch über die Animationsmethode erreicht werden. Im Gegensatz zur CSS-Methode kann die Animationsmethode die Animationszeit festlegen und einige Animationseffekte bereitstellen. Zum Beispiel möchten wir die Element-ID myDiv um 50 Pixel nach unten verschieben und die Animationsdauer beträgt 2 Sekunden (Hinweis: Das Top-Attribut in CSS legt eine relative Position fest, und die relative Position ist hier die Position 50 Pixel nach unten von der ursprünglichen Position). :

$("#myDiv").animate({ top: "+=50px"}, 2000);

top hier: "+=50px" bedeutet das Hinzufügen des oberen Attributwerts der ursprünglichen Position der Element-ID myDiv 50 Pixel.

3. Klassischer Fall

Im Folgenden zeigen wir anhand eines klassischen Falls, wie Sie mit jQuery das oberste Attribut eines Elements festlegen. In diesem Fall wird ein festes schwebendes Feld auf der Seite implementiert. Wenn die Seite bis zu einer bestimmten Entfernung nach unten gescrollt wird, scrollt das schwebende Feld mit der Seite und bleibt oben.

HTML-Code:

Dies ist eine schwebende Box

... 正文内容 ...

> ;

CSS-Code:

Header {

Position: fest;

oben: 0;

Hintergrundfarbe: #fff;
Breite: 100 %;
Höhe: 60px;
Z-Index: 999;
}

content {

padding-top: 60px;

}

JavaScript-Code:

$(window).scroll(function() {

// Aktuellen Scrollabstand der Seite abrufen

var scrollTop = $ (window).scrollTop();
// Höhe der schwebenden Box abrufen
var headerHeight = $("#header").height();
// Top-Attribut der schwebenden Box festlegen
if (scrollTop > ; headerHeight) {

$("#header").css("top", scrollTop - headerHeight);

} else {

$("#header").css("top", "0px");

}

});

Das Implementierungsprinzip des obigen Codes lautet: Wenn die Seite nach unten scrollt, werden der scrollTop-Abstand der aktuellen Seite und die Höhe des schwebenden Headers abgerufen Box durch js, und beurteilen Sie dann die Seite. Wenn ja, setzen Sie den oberen Attributwert der schwebenden Box auf scrollTop - headerHeight, damit sie mit der Seite scrollt. Wenn nicht, legen Sie den oberen Attributwert fest die schwebende Box auf 0px, um sie oben auf der Seite zu fixieren.

4. Zusammenfassung

Durch die Einleitung dieses Artikels verstehen wir, was das Top-Attribut ist und wie man jQuery verwendet, um das Top-Attribut eines Elements festzulegen. Gleichzeitig wird ein praktischer Fall gegeben, der den Lesern hilft, besser zu verstehen, wie jQuery zum Bedienen von Seitenelementen verwendet wird. Nach dem Lernen können Leser CSS und jQuery flexibel verwenden, um schönere Seiteneffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonJQuery-Einstellungen CSS oben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!