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

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

1. Laden Sie MySQL Community Server 5.7.16 herunt...

CSS3 verwendet Animationsattribute, um coole Effekte zu erzielen (empfohlen)

animation-name Animationsname, kann mehrere Werte...

Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen von Minio und Java SDK

Inhaltsverzeichnis 1minio ist einfach 2 Docker er...

So installieren Sie MySQL und MariaDB in Docker

Beziehung zwischen MySQL und MariaDB Das Datenban...

Methode der Iframe-Anpassung im webresponsiven Layout

Problem <br />Bei responsivem Layout sollte...

Detailliertes Tutorial zum Konfigurieren der lokalen Yum-Quelle in CentOS8

Die Centos8-Distribution wird über die BaseOS- un...

Beispiele für einige Verwendungstipps für META-Tags in HTML

HTML-Meta-Tag HTML-Meta-Tags können verwendet wer...

Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher

Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...

Detaillierte Erläuterung der Verwendung von Docker Commit

Manchmal müssen Sie bestimmte Abhängigkeiten im B...

Bestimmen Sie die Richtung der Mauseingabe basierend auf CSS

In einer Front-End-Technologiegruppe sagte ein Gr...

Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen

Optimieren von Abfragen Verwenden der Explain-Anw...

Wissen Sie, wie viele Verbindungen ein Linux-Server verarbeiten kann?

Vorwort Sehen wir uns zunächst an, wie eine TCP-V...

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Dieser Artikel verwendet den Befehl crontab in de...

Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

Inhaltsverzeichnis 1. Offizielle Dokumentation 2....

Eine kurze Diskussion über einen effizienten Algorithmus zum Erstellen von Baumstrukturen in JavaScript

Inhaltsverzeichnis Einführung Ideen Erstellen ein...