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

CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial

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

CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial

Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers

So integrieren Sie Bilder eleganter in Vue-Seiten

Vue ruft die Computerkamera auf, um die Fotofunktion zu realisieren

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Linux verwendet Rsync + Inotify, um eine Echtzeitsynchronisierung lokaler und Remotedaten zu erreichen

So starten und starten Sie nginx unter Linux neu

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Benutzerdefinierte Docker-Netzwerkcontainer-Verbindung

Referenzschreiben im JS- und CSS-Stil

Artikel empfehlen

Erweiterte Closures in JavaScript erklärt

Vergleich verschiedener Möglichkeiten zur Messung der Leistung von JavaScript-Funktionen

Detaillierte Beispiele zur Float-Verwendung in HTML/CSS

Vue implementiert einen einfachen Bildwechseleffekt

Vue3 Vue-Ereignisbehandlungshandbuch

Implementierung von Docker-Datenvolumenoperationen

Der Unterschied und die Verwendung von json.stringify() und json.parse()

Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung

Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix

Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat

Implementierung des CSS-Ladeeffekts Pac-Man

Verwenden von JavaScript zum Implementieren von Karusselleffekten

Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist

So ändern Sie das Root-Passwort von MySQL in Docker

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]