CSS erkennt, dass die linke Seite der Webseitenspalte fixiert ist und passt die Position beim Scrollen nach unten automatisch an
|
Vorschauadresse: https://ovsexia.gitee.io/leftfixed/ html:
<!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" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
</Kopf>
<div Klasse="oben"></div>
<div Klasse="Seite">
<div Klasse="links">
<div Klasse="left_poi"></div>
<div Klasse="links_innen">
<p><br />< ...
</div><!--left_in-->
<Skript>
$(Fenster).scroll(Funktion()
{
Aktion();
});
Funktion Aktion ()
{
sj = 20; //Unteres Intervall st = $(window).scrollTop(); //Höhe der Bildlaufleiste sd = $(".left_poi").offset().top;
sd_h = $(".left_in").height();
sb = $(".bottom").offset().top;
sb_h = $(".bottom").height();
rd_h = $(".rechts").Höhe();
bh = Fenster.innereHöhe;
si = sb-sd_h;
wenn(st>sd && rd_h>=sd_h){
$(".left_in").addClass("on");
wenn(st>si){
sy = bh-(sb-st)+sj;
$(".left_in").css({"top":"auto","bottom":sy+"px"});
}anders{
$(".left_in").css({"oben":"","unten":""});
}
}anders{
$(".left_in").removeClass("ein");
}
}
</Skript>
</div><!--links-->
<div Klasse="rechts"></div>
<div Klasse="klar"></div>
</div><!--Seite-->
<div Klasse="bottom"></div>
</body>
</html>CSS
@Zeichensatz "utf-8";
.clear {clear:both; Höhe:0 !wichtig; Breite:0 !wichtig; Überlauf:versteckt; Schriftgröße:0;}
.oben {Breite: 100 %; Höhe: 150px; Hintergrund: #0CC;}
.bottom {Breite: 100 %; Höhe: 400 px; Hintergrund: #39C;}
.Seite {Breite: 1200px; Rand: 20px auto; Position: relativ;}
.links {Breite: 200px; Float: links;}
.left_in {width:200px; background:#46bc67; border-top:3px solid #000; border-bottom:3px solid #000;}
.left_in.on {Position:fest; oben:0;}
.left_poi {Breite: 100 %; Höhe: 1px; Überlauf: ausgeblendet;}
.rechts {Breite: 960px; Höhe: 2100px; Float: rechts; Überlauf: ausgeblendet; Hintergrund: #FC3;}Zusammenfassen Oben ist das CSS, das ich Ihnen vorgestellt habe. So fixieren Sie die linke Seite der Webseitenspalte und passen die Position automatisch an, wenn Sie nach unten scrollen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt
Artikel empfehlen
js realisiert die nicht auswählbare Dropdown-Box-Version der dreistufigen Verknüpfung von Provinzen, Städten und Bezirken
Ich habe im Internet nach dreistufigen Verknüpfun...
Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL
Die Testumgebung dieses Experiments: Windows 10+c...
Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)
Vorwort Excel ist leistungsstark und weit verbrei...
So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI
Aufgrund von Geschäftsanpassungen im Unternehmen ...
Detailliertes Tutorial zur Installation von PHP und Nginx auf Centos7
Da die Anwendung von CentOS auf der Serverseite i...
JS implementiert die zufällige Generierung von Bestätigungscodes
In diesem Artikelbeispiel wird der spezifische JS...
So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue
Inhaltsverzeichnis Überblick 1. Definieren Sie st...
Optimierung von Datentabellen in MySQL-Datenbanken, Analyse von Fremdschlüsseln und Nutzung von drei Paradigmen
Dieser Artikel veranschaulicht anhand von Beispie...
Erläuterung der HTML-Tags
Erläuterung der HTML-Tags 1. HTML-Tags Tag: !DOCT...
Detaillierte Erläuterung grundlegender Betriebsbefehle wie Starten und Stoppen von Nginx unter Windows
Um Nginx unter Windows zu verwenden, müssen wir e...
So führen Sie PostgreSQL mit Docker aus
1. Installieren Sie Docker. Referenz-URL: Docker-...
React kapselt die globale Bullet-Box-Methode
In diesem Artikelbeispiel wird der spezifische Co...
Detailliertes Beispiel zum Einfügen benutzerdefinierter HTML-Datensätze im Quill-Editor
Wir schreiben bereits das Jahr 2020. Hungrige Men...
Handbuch zur MySQL-Volltextindizierung
Die Volltextindizierung erfordert eine spezielle ...
Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten
In diesem Artikelbeispiel wird der spezifische Co...