So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position
|
In diesem Artikel wird hauptsächlich erläutert, wie einige Inhalte in HTML-Seiten beim Scrollen fixiert und nicht gescrollt werden können, was für das Layout hilfreich ist. Ohne weitere Umschweife lauten die Einzelheiten wie folgt: Screenshots der Effekte:
Quellcode der Seite:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Seite ohne Titel</title>
</Kopf>
<body style="Breite: 900px; Rand: 0px auto; Zeilenhöhe: 23px; Polsterung: 10px;">
<div>
<div style="float: links; Breite: 120px;">
<div>
Ich werde rollen<br/>
Scrollender Inhaltsbereich<br/>
Scrollender Inhaltsbereich<br/>
Scrollender Inhaltsbereich<br/>
</div>
<div id="div1" style="Rand: durchgehend 1px grau; Breite: 90px; Polsterung: 10px; Hintergrundfarbe: #eff;">
Ich scrolle nicht<br/>
Du siehst mich an<br/><br/> Ich rolle nicht<br/>
Du siehst mich an<br/><br/> Ich rolle nicht<br/>
Du siehst mich an<br/><br/> Ich rolle nicht<br/>
Schau mich an<br/><br/>
</div>
</div>
<div style="float: right; Breite: 750px; Rahmen: durchgehend 1px grau; Polsterung: 10px;">
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssss, ich bin der Inhalt ssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss Ich bin der Inhalt sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss Ich bin der Inhalt sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssss Ich bin der Inhalt ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
</div>
</div>
<Skripttyp="text/javascript">
Funktion htmlScroll() {
var top = document.body.scrollTop || document.documentElement.scrollTop;
wenn (elFix.data_top < top) {
elFix.style.position = "fest";
elFix.style.top = 0;
elFix.style.left = elFix.data_left;
}
anders {
elFix.style.position = "statisch";
}
}
Funktion htmlPosition(obj) {
var o = obj;
var t = o.offsetTop;
var l = o.offsetLeft;
während (o = o.offsetParent) {
t += o.OffsetTop;
l += o.Linksversatz;
}
obj.data_top = t;
obj.data_left = l;
}
var alteHtmlWidth = document.documentElement.offsetWidth;
Fenster.onresize = Funktion () {
var neueHtmlWidth = Dokument.documentElement.offsetWidth;
if (alteHtmlBreite == neueHtmlBreite) {
zurückkehren;
}
alte HTML-Breite = neue HTML-Breite;
elFix.style.position = "statisch";
htmlPosition(elFix);
htmlScroll();
}
Fenster.onscroll = htmlScroll;
var elFix = document.getElementById('div1');
htmlPosition(elFix);
</Skript>
</body>
</html>
Dies ist das Ende dieses Artikels darüber, wie man Inhalte an einer festen Position hält, wenn eine HTML-Seite gescrollt wird. Weitere relevante Inhalte zum Scrollen von HTML-Seiten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Tabellen in HTML aufteilen und zusammenführen (colspan, rowspan)
Artikel empfehlen
Verwendung von MySQL DDL-Anweisungen
Vorwort Die Sprachklassifikation von SQL umfasst ...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Verwendete APIs Einfaches Beis...
Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz
Inhaltsverzeichnis Einführung So stellen Sie eine...
Was bedeutet das „a“ in rgba? CSS RGBA-Farbleitfaden
RGBA ist eine CSS-Farbe, mit der Farbwert und Tra...
Eine kurze Analyse der Beziehung zwischen verschiedenen Tomcat-Protokollen und der Segmentierung von catalina.out-Dateien
Die Beziehung zwischen Tomcat-Protokollen Ein Bil...
So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen
Früher wusste ich nur, wie ich zum Springen das Na...
MySQL in Ubuntu 18.04 installieren (grafisches Tutorial)
Tipp: Die folgenden Vorgänge werden alle mit Root...
So überwachen Sie Tomcat mit LambdaProbe
Einführung: Lambda Probe (früher bekannt als Tomc...
CSS-Code zur Steuerung der Hintergrundfarbe der Webseite
Ich glaube, jeder macht sich oft Sorgen, ob er Bi...
So zeigen Sie Bildinformationen in Docker an
In diesem Artikel müssen wir lernen, wie man Bild...
Detaillierte Erklärung von Promises in JavaScript
Inhaltsverzeichnis Grundlegende Verwendung von Pr...
Webprojektentwicklung VUE-Mischungs- und Vererbungsprinzip
Inhaltsverzeichnis Mischen Mixin-Hinweis (doppelt...
Die Hauptidee zum dynamischen Festlegen von Routing-Berechtigungen in Vue
Ich habe zuvor einige dynamische Routing-Einstell...
Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell
Wie oben gezeigt, sind Füllwerte zusammengesetzte...
Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)
Während der Entwicklung wird eine gute Benutzerob...