Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS
|
Wenn die Bildlaufleiste nach unten gezogen wird, bleibt die schwebende Box an derselben Position, hauptsächlich aufgrund Wenn Sie ein Stück nach unten scrollen und sich der Fußzeile nähern, steuere ich mit js, dass das Div verschwindet, und es wird wieder angezeigt, wenn Sie nach oben scrollen.
<!DOCTYPE html>
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
.div1 {
Höhe: 2000px;
}
.div2 {
Breite: 100 %;
Höhe: 35px;
Hintergrundfarbe: #3399FF;
Rand oben: 100px;
}
.div2_1{
Position: fest;
Breite: 100 %;
Höhe: 35px;
z-Index:999;
Hintergrundfarbe: #3399FF;
oben: 0px;
_position:absolut;
_bottom:auto;
_top:Ausdruck(eval(Dokument.documentElement.scrollTop));
}
.div2_2
{
Anzeige: keine;
}
</Stil>
<Skripttyp="text/javascript">
Fenster.Onscroll=Funktion(){
var t=document.documentElement.scrollTop||document.body.scrollTop;
var div2 = document.getElementById("div2");
wenn(t>= 100){
div2.Klassenname = "div2_1";
}anders{
div2.Klassenname = "div2";
}
}
</Skript>
</Kopf>
<Text>
<div Klasse="div1">
<div id="div2" class="div2"></div>
</div>
</body>
</html>Ergänzung: JavaScript zur Implementierung der Floating-Box rechts HTML Quelltext: <Text> <div id="div1"> </div> </body> CSS Code:
#div1{
Höhe: 150px;
Breite: 100px;
Hintergrund: rot;
Position: absolut;
rechts: 0px;
unten: 0px;
}
Körper{
Höhe: 2000px;
}JavaScript-Code
//Wenn das Formular scrollt window.onscroll=function (){
var obj = document.getElementById("div1");
// Berücksichtigung der Browserkompatibilität (Scrollhöhe)
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//Die Höhe des sichtbaren Bereichs des Browsers + die eigene Höhe des Objekts + die gewellte Höhe // obj.style.top = document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
//var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
//verschieben(Ziellänge);
//Auf diese Weise haben wir den Grundcharakter fertiggestellt. //Methode 2: Das Ergebnis ist, dass er zittern wird. //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
//verschieben(Ziellänge);
var targetLen = parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
verschieben(Ziellänge);
//Damit sind unsere Grundfunktionen realisiert.}
//Hier fügen wir eine Pufferbewegung hinzu, damit wir diese Dinge bequem tun können. var Timer = null;
Funktion verschieben(iTarget){
clearInterval(Timer); //Zuerst löschen var obj=document.getElementById("div1");
Timer=setInterval(function (){ //Die Entfernung vom Objekt oben var speed=(iTarget-obj.offsetTop)/4;
Geschwindigkeit=Geschwindigkeit>0?Math.ceil(Geschwindigkeit):Math.floor(Geschwindigkeit);
//Ermitteln Sie zuerst unsere Geschwindigkeit if(obj.offsetTop==iTarget){
clearInterval(timer); //Nachdem wir das Ziel erreicht haben, löschen wir das Element}else{
obj.style.top=obj.offsetTop+Geschwindigkeit+'px';
}
},30)
//Lass uns unsere Pufferübung machen}Damit ist dieser Artikel über den Beispielcode zur Implementierung einer schwebenden Seitenbox auf JS-Basis abgeschlossen. Weitere relevante Inhalte zu schwebenden Seitenboxen auf JS-Basis finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: So verwenden Sie CURRENT_TIMESTAMP in MySQL
>>: Leistung des Node+Express-Testservers
Artikel empfehlen
Bei der Installation von Docker Desktop wird eine Fehlermeldung angezeigt: Die WSL 2-Installation ist unvollständig (Beheben Sie die Fehlermeldung).
Fehlerbeschreibung Wenn wir Docker Desktop instal...
Detaillierte Schritte zum Selbststart und geplanten Start von Python-Skripten unter Linux
1. Python wird beim Start automatisch ausgeführt ...
MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen
Hintergrund: Wenn es in MySQL eine begrenzte Eben...
Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository
Bisher wurden die von uns verwendeten Images alle...
Hbase – Erste Schritte
1. HBase-Übersicht 1.1 Was ist HBase? HBase ist e...
So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung
Unter Linux ist alles eine Datei, daher besteht d...
Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?
Vorwort Als grundlegende Datenstruktur spielen Ar...
Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Wenn ich eine Eigenschaft in Vue-Daten zufällig ändere, wird die Ansicht aktualisiert?
Interviewer: Haben Sie den Quellcode von Vue gele...
Mehrere Methoden zur Lösung des Problems des MySQL-Fuzzy-Abfrageindexfehlers
Wenn wir das Platzhalterzeichen „like %“ verwende...
Analyse der Schwierigkeiten im Hot-Standby der MySQL-Datenbank
Ich habe Ihnen zuvor die Konfigurationsmethode fü...
Detailliertes Tutorial zur Installation von MySQL 8.0.20 auf CentOS7.8
1. MySQL-Software installieren Laden Sie das offi...
Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server
In der Entwicklungsumgebung wird das Vue-Projekt ...
Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung
Inhaltsverzeichnis 1. Einleitung 2. Über vue-simp...
Implementierung des Whack-a-Mole-Spiels in JavaScript
In diesem Artikel finden Sie den spezifischen Cod...