JavaScript zum Erreichen einer festen Seitenleiste
|
Verwenden Sie Javascript, um eine feste Seitenleiste zu implementieren. Zu Ihrer Information: Der spezifische Inhalt ist wie folgt Ich lerne immer noch das große Frontend. Bitte verzeihen Sie mir, wenn der Code Unregelmäßigkeiten oder falsche Ideen enthält. Vielen Dank für Ihren Rat. Wenn wir in einem bestimmten Einkaufszentrum oder auf bestimmten Websites surfen, stoßen wir häufig auf etwas, das als Seitenleiste bezeichnet wird. Diese ändert sich mit der Dauer unseres Browser-Browsings1 und erreicht dadurch eine feste Position relativ zum Fenster1 **Code wie unten**
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
.cm{
Position: absolut;
oben: 300px;
Rand links: 1150px;
Breite: 60px;
Höhe: 130px;
Hintergrundfarbe: rosa;
}
.w{
Rand: 10px automatisch;
Breite: 80%;
}
.Kopf{
Höhe: 200px;
Hintergrundfarbe: blau;
}
.Banner{
Höhe: 400px;
Hintergrundfarbe: grün;
}
.hauptsächlich{
Höhe: 1000px;
Hintergrundfarbe: Hotpink;
}
Spanne {
Anzeige: keine;
/*Position: absolut;
unten: 0;*/
}
</Stil>
</Kopf>
<Text>
<div Klasse="cm">
<span class="backTop">Zurück zum Anfang</span>
</div>
<div class="head w">Kopfbereich</div>
<div class="banner w">Bannerbereich</div>
<div class="main w">Hauptbereich</div>
<Skript>
var cm = document.querySelector('.cm')
var Banner = Dokument.AbfrageSelector('.banner')
/*Konsole.log(Banner.OffsetTop)*/
//Die Größe und Position des gekräuselten Kopfes werden außerhalb geschrieben var bannertop=banner.offsetTop
var cmtop=cm.offsetTop-bannertop
var main = document.querySelector('.main')
var goback = document.querySelector('.backTop')
var maintop=main.offsetTop
document.addEventListener('scroll',Funktion () {
//Die Seite wird weggerollt /*console.log(window.pageYOffset)*/
//Wenn der Curl-Header größer als 214 ist, wird die Seitenleiste fixiert, wenn (window.pageYOffset>bannertop){
cm.style.position='fest'
cm.style.top=cmtop+'px'
}anders {
cm.style.position='absolut'
cm.style.top='300px'
}
wenn (window.pageYOffset>maintop){
gehe zurück.style.display='block'
}anders {
gehe zurück.style.display='keine'
}
})
</Skript>
</body>
</html>Demonstrationseffekt
Code Erklärung Dabei kommt das dem Dokument hinzugefügte Ereignis „scroll“ zum Einsatz, beim Scrollen wird das Browser-Scroll-Ereignis zum Auslösen der Funktion genutzt. Hier wird eine Variable namens BannerTop festgelegt. Dabei handelt es sich um den Abstand zwischen der Oberseite des grünen Moduls in der Mitte und der Oberseite der Seite. Anschließend wird die Variable cmtop definiert, wobei cm der Abstand von der Seitenleiste zur Oberseite ist, cmtop=BannerTop-cm.OffsetTop. Bestimmen Sie dann, ob die gekräuselte Länge der Seite größer ist als der Abstand vom mittleren Modul nach oben, was bedeutet, ob die Seite zum mittleren Modul gewischt wurde. Wenn sie zum mittleren Modul gewischt wurde, fixieren Sie die Position der Seitenleiste und ändern Sie dann den Abstand von der Seitenleiste nach oben entsprechend. In diesem Fall ist der Wert von cmtop konstant, wenn es nicht in den mittleren Bereich gerollt wird, und wenn es in den mittleren Bereich gerollt wird, Banner, da die Seitenleiste und der mittlere Block relativ statisch sind. Der Wert von Top wird negativ, daher erhöht sich der Wert von cmtop entsprechend und dieser erhöhte Wert wird an den Wert für den Abstand der Seitenleiste vom oberen Rand weitergegeben. Dies führt dazu, dass die Seitenleiste relativ ruhig bleibt, wenn sie in den mittleren Bereich gescrollt wird. Wenn der mittlere Bereich nicht verschoben wird, bleibt die Seitenleiste in der Standardposition. Wenn Sie dann zum letzten Bereich wischen, werden in der Seitenleiste die Worte „Zurück zum Anfang“ angezeigt. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: So installieren Sie Phabricator mit Docker
Artikel empfehlen
MySQL-Serververbindung, Trennung und cmd-Bedienung
Verwenden Sie den Befehl mysql, um eine Verbindun...
Detailliertes Tutorial zur Installation von MySQL unter WINDOWS
1. Laden Sie das Installationspaket herunter -Wäh...
Verwendung des Array-Filters filter() in JS
Inhaltsverzeichnis 1. Einleitung 2. Einführung in...
Erste Schritte Tutorial für Neulinge ⑤: Die Registrierung auf der Website ist sehr einfach, Tipps zur schnellen Registrierung
Freunde, die Speicherplatz gekauft und Websites er...
Eine Falle und Lösung bei der Verwendung von fileReader
Inhaltsverzeichnis Eine Falle bei fileReader Fall...
Docker ermöglicht den nahtlosen Aufruf von Shell-Befehlen zwischen Container und Host
Wie unten dargestellt: nsenter -t 1 -m -u -n -i s...
Ubuntu-Terminal, mehrere Fenster, geteilter Bildschirm, Terminator
1. Installation Das größte Feature von Terminator...
Kann die wiederholbare Leseebene von MySQL Phantomlesevorgänge lösen?
Einführung Als ich mehr über die Datenbanktheorie...
Detaillierte Erklärung des gesamten Prozesses und der Schritte zur Installation von Clion auf Ubuntu16.04
Erklären Sie den gesamten Prozess von CLion von G...
Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann
Verwenden Sie ifnull statt isnull isnull wird ver...
Einführung in gängige MySQL-Speicher-Engines sowie Parametereinstellung und -optimierung
MyISAM, eine häufig verwendete Speicher-Engine in...
Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall
1.1 Einführung in die iptables-Firewall Netfilter...
Vue-Kapselungskomponententool $attrs, $listeners-Verwendung
Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...
HTML-Head-Tag-Metadaten zum Erreichen einer Aktualisierungsumleitung
Code kopieren Der Code lautet wie folgt: <html...
Detaillierte Schritte und Methoden zur Problemlösung zur Installation von MySQL 8.0.19 unter Linux
Ich habe vor Kurzem einen Tencent-Cloud-Server ge...