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
SQL-Aggregation, Gruppierung und Sortierung
Inhaltsverzeichnis 1. Aggregierte Abfrage 1. COUN...
Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers
/****************** * Zeitverwaltung des Linux-Ke...
Detaillierte Analyse des Linux-NFS-Mechanismus anhand von Fällen
In Fortsetzung des vorherigen Artikels erstellen ...
Beispiele für die Verwendung von ungeordneten Listen-Tags und geordneten Listen-Tags im HTML-Format
1. Obere und untere Listen-Tags: <dl>..<...
VMWare15 installiert Mac OS-System (grafisches Tutorial)
Installationsumgebung Windows 10 VMware Workstati...
UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout
Als ich vor ein paar Tagen ein dreispaltiges Layou...
Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3
In Projekten wird häufig das zweispaltige Layout ...
So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen
Kürzlich bestand der Kunde eines Projekts darauf,...
Detaillierte Erklärung der Schritte zum Erstellen eines Webservers mit node.js
Vorwort Es ist sehr einfach, einen Server in node...
MySQL-Tutorial versteht gespeicherte Prozeduren gründlich
Inhaltsverzeichnis 1. Konzepte im Zusammenhang mi...
Detaillierte Erläuterung der Implementierungsmethode und Verwendung von abgerundeten Ecken mit CSS3-Randradius
Früher war es ziemlich mühsam, abgerundete Ecken ...
Befehlsliste des Baota Linux-Panels
Inhaltsverzeichnis Pagoda installieren Management...
So verwenden Sie Nginx zum Proxy mehrerer Anwendungssites in Docker
Vorwort Was ist die Rolle eines Agenten? - Mehrer...
Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist
Wenn die Position absolut ist, wird der Prozentsa...
So installieren Sie Linux Flash
So installieren Sie Flash unter Linux 1. Besuchen...