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
CSS3-Zeitleistenanimation
Ergebnisse erzielen html <h2>CSS3-Zeitleist...
Natives JS zum Erzielen von Jalousie-Spezialeffekten
In diesem Artikel wird ein Jalousie-Spezialeffekt...
Neue Funktionen in MySQL 8.0: Hash Join
Das MySQL-Entwicklungsteam hat am 14. Oktober 201...
JS tiefe und flache Kopierdetails
Inhaltsverzeichnis 1. Was bedeutet „Shallow Copy“...
Tutorial zur Installation von Nginx in einer Linux-Umgebung
Inhaltsverzeichnis 1. Installieren Sie die erford...
Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen
Ich habe meiner persönlichen Website vor Kurzem e...
Der Unterschied zwischen useEffect und useLayoutEffect in React
Inhaltsverzeichnis Voraussetzungen Effekt verwend...
MySQL-Reihe: Redo-Log, Undo-Log und Binlog – ausführliche Erklärung
Durchführung von Transaktionen Das Redo-Protokoll...
So verwenden Sie mysqldump zum Sichern von MySQL-Daten
1. Einführung in mysqldump mysqldump ist ein logi...
Drei Diskussionen zum Iframe Adaptive Height Code
Beim Erstellen einer B/S-Systemschnittstelle stößt...
So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank
MySql ist eine Datenquelle, die wir häufig verwen...
Lösen Sie das Problem des Zeilenumbruchs in der Scroll-Ansicht des WeChat-Applets
Als ich heute ein kleines Programm schrieb, benut...
Beispielcode zur Implementierung der PC-Auflösungsanpassung in Vue
Inhaltsverzeichnis planen Abhängigkeiten installi...
Unverzichtbar für die Frontend-Entwicklung: 12 empfohlene Tools zum Testen der Browserkompatibilität
Für Frontend-Entwickler ist es eine zeitaufwändig...
Einführung in die MySQL-Operatoren <> und <=>
<> Operator Funktion: Zeigt an, dass es ung...