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

Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit

Um das Benutzererlebnis und die Benutzerfreundlich...

IE6 BUG und Fix ist eine vorbeugende Strategie

Originalartikel: Ultimatives IE6-Cheatsheet: So b...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...

Erstellen eines Dateisystems für ARM-Entwicklungsboards unter Linux

1. Bitte laden Sie den Busybox-Quellcode online h...

Detaillierte Erklärung der MySql-Installation und des Logins

Überprüfen Sie, ob MySQL bereits unter Linux inst...

Super detaillierter GCC-Upgrade-Prozess unter Linux

Inhaltsverzeichnis Vorwort 1. Aktuelle gcc-Versio...

Detaillierte Erklärung der Mixins in Vue.js

Mixins stellen auf flexible Weise verteilte, wied...

Tutorial zur Änderung des Root-Passworts in MySQL 5.6

1. Nach der Installation von MySQL 5.6 kann es ni...

Einrichten eines Docker-Proxys unter CentOS 7 (Konfiguration der Umgebungsvariablen des Systemd-Dienstes unter Linux)

Der Docker-Daemon verwendet HTTP_PROXY , HTTPS_PR...

Nexus nutzt API für den Betrieb

Nexus bietet RestApi, aber einige APIs müssen noc...

Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine

Virtuelle Maschinen sind eine sehr praktische Tes...

Detaillierte Erläuterung der Einschränkungen und Beschränkungen von MySQL-partitionierten Tabellen

Build deaktivieren Partitionsausdrücke unterstütz...

Eine kurze Analyse der Unterschiede und Funktionen zwischen Übergang, Transformation und Übersetzung in CSS3

transformieren und übersetzen Transformieren bezi...

Spezifische Verwendung von MySQL-Fensterfunktionen

Inhaltsverzeichnis 1. Was ist eine Fensterfunktio...

Vue-Router erlaubt keine Navigation zum aktuellen Standort (/Pfad) Fehlerursachen und -behebungen

Inhaltsverzeichnis Fehlermeldung Ursache Fehlerde...