Implementierungscode der schwebenden Ebene, die auf der rechten Seite der Webseite fixiert ist

Implementierungscode der schwebenden Ebene, die auf der rechten Seite der Webseite fixiert ist

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
Körper
{
Rand: 0px;
Polsterung: 0px;
Rand oben: 60px;
Rand unten: 60px;
}
#div_nav_zone_rechts
{
Position: absolut;
schweben: rechts;
z-Index: 3;
Breite: 120px;
Höhe: 100px;
rechts: 0px;
oben: 332px;
Hintergrundfarbe: #999;
}
#div_nav_zone_rechts_unten
{
Position: absolut;
schweben: rechts;
z-Index: 3;
Breite: 120px;
Höhe: 100px;
rechts: 0px;
oben: 532px;
Hintergrundfarbe:#CCC;
}
#div_ul
{
Position: fest;
Höhe: 50px;
}
ul,li
{
Rand: 0px;
}
li
{
Listenstil: keiner;
}
</Stil>
<script type="text/javascript" src="js/jquery.js" ></script>
<Skripttyp="text/javascript">
$(Funktion()
{
moveDiv(); //Seiteninitialisierung ausführen
$(Fenster).scroll(Funktion(){
verschiebeDiv();
moveRightBottomDiv();
});
});
//Mitte rechts
Funktion moveDiv()
{
var scrollTop = $(document).scrollTop(); //Die Höhe der Oberseite der ausgeblendeten Bildlaufleiste
var clientHeight = $(window).height(); //Höhe des Inhaltsbereichs der Webseite
//Setze die Position auf
var hei = $("#div_nav_zone_right").css("Höhe");
hei = hei.replace("px","");
var newPosY = scrollTop + (ClientHeight-hei)/2;
$("#div_nav_zone_right").css("oben",newPosY+"px");
}
//100 Pixel unterhalb der rechten Seite
Funktion moveRightBottomDiv()
{
var scrollTop = $(document).scrollTop(); //Die Höhe der Oberseite der ausgeblendeten Bildlaufleiste
var clientHeight = $(window).height(); //Höhe des Inhaltsbereichs der Webseite
//Setze die Position auf
var hei = $("#div_nav_zone_right_bottom").css("Höhe");
hei = hei.replace("px","");
var newPosY = ClientHeight + ScrollTop – hei – 100;
$("#div_nav_zone_right_bottom").css("oben",newPosY+"px");
}
</Skript>
</Kopf>
<Text>
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>
<p>sd</p>
<p>f</p>
<p> </p>
<p>Anzeigen</p>
<p>f</p>
<p>Anzeigen</p>
<p>
<input type="button" name="button" id="button" value="Senden" onclick="clk()" />
</p>
<p>Anzeige</p>
<p>sf AS
D
als
D
S
D
</p>
<p> </p>
<p>Anzeigen</p>
<p>f</p>
<p>Anzeigen</p>
traurig
S
D
A
D
A
D
A

<div id="div_nav_zone_right" >
<ul>
<li>Seitenleistenmenü 1</li>
<li>Seitenleistenmenü 2</li>
<li>Seitenleistenmenü 3</li>
<li>Seitenleistenmenü 4</li>
</ul>
</div>

<div id="div_nav_zone_rechts_unten" >
<ul>
<li>Seitenleistenmenü 1</li>
<li>Seitenleistenmenü 2</li>
<li>Seitenleistenmenü 3</li>
<li>Seitenleistenmenü 4</li>
</ul>
</div>
</body>
</html>

<<:  Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen

>>:  Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

Artikel empfehlen

Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS

HTML-Kommentarfeld mit Emoticons. Die Emoticons w...

Einfacher CSS-Textanimationseffekt

Ergebnisse erzielen Implementierungscode html <...

Der Prozess der Installation und Konfiguration von Nginx in Win10

1. Einleitung Nginx ist ein kostenloser, quelloff...

Vue implementiert die Countdown-Komponente für zweite Kills

In diesem Artikel wird der spezifische Code von V...

CSS implementiert horizontal scrollende Navigationsleiste auf Mobilgeräten (gilt auch für PC-Geräte)

Funktion Herkunft Ich habe kürzlich an einem H5 g...

Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads

In diesem Artikel erfahren Sie, wie Sie mit think...

Detaillierte Erklärung zu MySQL und Springs Autocommit

1 MySQL Autocommit-Einstellungen MySQL führt stan...

Detaillierte Erläuterung des MySQL-Redo-Logs (Redo-Log) und des Rollback-Logs (Undo-Log)

Vorwort: Im vorherigen Artikel wurden mehrere all...

Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen

1. Die erste Methode besteht darin, den Befehl un...

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...

Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker

Docker: Zookeeper schnell installieren Ich habe Z...

So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei

Holen Sie sich das Dockerfile aus dem Docker-Imag...

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

In diesem Artikel erfahren Sie mehr über die Opti...

Docker stellt MySQL bereit, um Beispielcode für eine Remoteverbindung zu erreichen

1. Docker durchsucht MySQL查看mysql版本 2. Docker Pul...

Detaillierte Erläuterung des Selinux-Grundkonfigurationstutorials unter Linux

selinux ( Security-Enhanced Linux) ist ein Linux-...