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 position:fixed; .

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:

js, um den Effekt eines Mausaufhängungsrahmens zu erzielen
js-Text überschreitet die Länge und wird durch Auslassungspunkte ersetzt. Beim Bewegen der Maus wird ein Beispiel in einer schwebenden Box angezeigt.
Schreiben Sie eine schwebende Box, die mit JS und CSS automatisch ausgeblendet werden kann
JS realisiert den Floating-Box-Effekt auf der rechten Seite

<<: So verwenden Sie CURRENT_TIMESTAMP in MySQL

>>: Leistung des Node+Express-Testservers

12 Arten der Komponentenkommunikation in Vue2

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

12 Arten der Komponentenkommunikation in Vue2

Eine kleine Einführung in die Verwendung der Position in HTML

Ein Artikel erklärt den Klassenlademechanismus von Tomcat

Detaillierte Erläuterung der MySQL-Methode zur Optimierung der Reihenfolge nach Anweisung

Tutorial zur Installation und Browserverwendung des leichten Objektspeicherdienstes Minio

HTML validieren HTML-Validierung

Natives JS zur Implementierung des Spiels 2048

Nginx-Weiterleitung basierend auf URL-Parametern

Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6

Installationstutorial für Docker unter Linux

Artikel empfehlen

Was ist die Datei mysql-bin.000001 in MySQL? Kann sie gelöscht werden?

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System

Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

Detailliertes Tutorial zur Installation von MySQL 5.7.20 auf RedHat 6.5/CentOS 6.5

So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten

So verwenden Sie den Nginx-Proxy zum Surfen im Internet

Beispiel für die Implementierung einer virtuellen Liste im WeChat Mini-Programm

Detaillierte Erklärung zur Installation von MariaDB 10.2.4 auf CentOS7

Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux

Sammlung von 12 praktischen Web-Online-Tools

Grafisches Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 16.04 64-Bit

Detaillierte Beispiele für Docker-Compose-Netzwerke

Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung

Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers