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

>>: Grafisches Tutorial zu VMware Workstation Pro 16 zum Erstellen eines CentOS8-Clusters für virtuelle Maschinen