So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

In diesem Artikel wird hauptsächlich erläutert, wie einige Inhalte in HTML-Seiten beim Scrollen fixiert und nicht gescrollt werden können, was für das Layout hilfreich ist. Ohne weitere Umschweife lauten die Einzelheiten wie folgt:

Screenshots der Effekte:

Quellcode der Seite:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>Seite ohne Titel</title>
</Kopf>
<body style="Breite: 900px; Rand: 0px auto; Zeilenhöhe: 23px; Polsterung: 10px;">
<div>
    <div style="float: links; Breite: 120px;">
        <div>
            Ich werde rollen<br/>
            Scrollender Inhaltsbereich<br/>
            Scrollender Inhaltsbereich<br/>
            Scrollender Inhaltsbereich<br/>
        </div>
        <div id="div1" style="Rand: durchgehend 1px grau; Breite: 90px; Polsterung: 10px; Hintergrundfarbe: #eff;">
            Ich scrolle nicht<br/>
            Du siehst mich an<br/><br/> Ich rolle nicht<br/>
            Du siehst mich an<br/><br/> Ich rolle nicht<br/>
            Du siehst mich an<br/><br/> Ich rolle nicht<br/>
            Schau mich an<br/><br/>


        </div>
    </div>
    <div style="float: right; Breite: 750px; Rahmen: durchgehend 1px grau; Polsterung: 10px;">
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssss, ich bin der Inhalt ssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>sssssss Ich bin der Inhalt sssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>sssssss Ich bin der Inhalt sssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssss Ich bin der Inhalt ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>sssssssIch bin der Inhaltsssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br>

    </div>
</div>
<Skripttyp="text/javascript">
    Funktion htmlScroll() {
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        wenn (elFix.data_top < top) {
            elFix.style.position = "fest";
            elFix.style.top = 0;
            elFix.style.left = elFix.data_left;
        }
        anders {
            elFix.style.position = "statisch";
        }
    }

    Funktion htmlPosition(obj) {
        var o = obj;
        var t = o.offsetTop;
        var l = o.offsetLeft;
        während (o = o.offsetParent) {
            t += o.OffsetTop;
            l += o.Linksversatz;
        }
        obj.data_top = t;
        obj.data_left = l;
    }

    var alteHtmlWidth = document.documentElement.offsetWidth;
    Fenster.onresize = Funktion () {
        var neueHtmlWidth = Dokument.documentElement.offsetWidth;
        if (alteHtmlBreite == neueHtmlBreite) {
            zurückkehren;
        }
        alte HTML-Breite = neue HTML-Breite;
        elFix.style.position = "statisch";
        htmlPosition(elFix);
        htmlScroll();
    }
    Fenster.onscroll = htmlScroll;

    var elFix = document.getElementById('div1');
    htmlPosition(elFix);

</Skript>
</body>
</html>

Dies ist das Ende dieses Artikels darüber, wie man Inhalte an einer festen Position hält, wenn eine HTML-Seite gescrollt wird. Weitere relevante Inhalte zum Scrollen von HTML-Seiten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Tabellen in HTML aufteilen und zusammenführen (colspan, rowspan)

>>:  HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden

Artikel empfehlen

Implementierung der Miniprogramm-Aufzeichnungsfunktion

Vorwort Bei der Entwicklung eines Miniprogramms b...

So laden Sie Flash in HTML (2 Implementierungsmethoden)

Erste Methode : CSS Code: Code kopieren Der Code l...

Implementierungsmethode für HTML-Neun-Raster-Layouts

Die Diversifizierung von Website-Layouts ist unse...

Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen

Plötzlich musste ich einen privaten Dienst für di...

Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil

Die Bedeutung der Schreibreihenfolge Reduzieren S...

Lernen Sie die Prinzipien und allgemeinen Operationen von MySQL-Partitionstabellen anhand von Beispielen kennen

1. Bedeutung der Partitionstabelle Eine Partition...

So implementieren Sie die Online-Hot-Migration von virtuellen KVM-Maschinen (Bild und Text)

1. Migrationsmethode für virtuelle KVM-Maschinen ...

Ein unvollständiger Leitfaden zur JavaScript-Toolchain

Inhaltsverzeichnis Überblick Statische Typprüfung...

Teilen Sie den Installationsdatensatz für MySql8.0.19

Im vorherigen Artikel wurde der Installationsproz...

Docker realisiert die Verbindung mit demselben IP-Netzwerksegment

Vor Kurzem habe ich das Problem gelöst, dass Dock...

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Ich weiß nicht warum, aber UI gestaltet gerne Wab...

VMware virtuelle Maschine installieren CentOS 8 (1905) System-Tutorial-Diagramm

Die weltberühmte virtuelle Maschinensoftware VMwa...

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

1. Installieren Sie ffmpeg unter Centos Linux 1. ...

Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7

Bereiten Sie die Zutaten wie oben gezeigt vor (ps...

So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten

Manche Webseiten erscheinen möglicherweise nicht ...