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
Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue
Einführung Während des Front-End-Projektentwicklu...
So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle
Nur den oberen Rand anzeigen <table frame=above...
Verwenden Sie CSS, um einige häufig auftretende seltsame Schaltflächen einfach zu implementieren
Hintergrund In der Gruppe werden einige Studieren...
MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung
1. MySQL 8.0.20 herunterladen und dekomprimieren ...
Spezifische Verwendung der MySQL-Vorbereitungsvorverarbeitung
Inhaltsverzeichnis 1. Vorverarbeitung 2. Vorbehan...
Detaillierte Erklärung der jQuery-Kettenaufrufe
Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...
Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen
AWS – Amazons Cloud-Computing-Serviceplattform Ic...
Beispiel zum Erstellen und Ausführen mehrerer MySQL-Container in Docker
1. Verwenden Sie das Image mysql/mysql-server:lat...
Das vergessene Button-Tag
Hinweis: Dieser Artikel wurde von jemand anderem ü...
10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen
In diesem Blog besprechen wir zehn Leistungseinst...
Lösung für MySQL-Fehler beim Ändern des SQL-Modus
Inhaltsverzeichnis Ein Mord verursacht durch ERR ...
MySQL implementiert die kontinuierliche Anmeldefunktion und startet nach einem Tag der Anmeldung von vorne (SQL-Anweisung).
1. Erstellen Sie eine Testtabelle CREATE TABLE `t...
Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)
Da immer mehr Docker-Images verwendet werden, mus...
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...
So verwenden Sie vue3+TypeScript+vue-router
Inhaltsverzeichnis Einfach zu bedienen Erstellen ...