So platzieren Sie das Fenster in Javascript oben

So implementieren Sie den Fensteranfang mit JavaScript: 1. Erstellen Sie eine Front-End-Beispieldatei. 2. Ermitteln Sie den Abstand vom Element zum oberen Rand des Browserfensters. 3. Verwenden Sie eine Schleife, um das Element oben zu halten.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wie halte ich das Fenster mit JavaScript oben?

JavaScript implementiert die Pinned-Funktion

Es gibt viele Möglichkeiten, die Pinned-Funktion mit JavaScript zu implementieren. Es scheint komplizierter zu sein, dass ich sie für etwas benötige, das ich kürzlich gemacht habe Im Internet habe ich schließlich eine Methode gefunden, mit der getBoundingClientRect () den Abstand vom Seitenelement zum oberen Rand des Browserfensters ermitteln kann. Der endgültige Code lautet wie folgt:

let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离
//$(document).scrollTop()为滚动条的高度
        for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
            setTimeout(function () {
                window.scrollTo(0, i);
            }, 0)
        }

Der Hauptzweck der Verwendung von Schleifen besteht darin, die Elemente oben unauffällig zu machen. Gleichzeitig ist Folgendes zu beachten: if die for-Anweisung Verwendet var i anstelle von let i, timer. Sie müssen es mit einer Funktion zur sofortigen Ausführung umschließen, um sicherzustellen, dass i sofort wirksam werden kann.

Die Auswirkungen des Festhaltens an der Oberseite und der auf diese Weise erzielten Ankerpunkte sind ähnlich. Wenn Sie eine schwebende Oberseite erreichen möchten (ein bestimmter Teil ist an der Oberseite befestigt), können Sie die Verwendung von position:fixed in Betracht ziehen, um dies zu erreichen.
Das ist es. . . .

Empfohlenes Lernen: „JavaScript-Grundlagen-Tutorial“

Das obige ist der detaillierte Inhalt vonSo platzieren Sie das Fenster in Javascript oben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!