So erreichen Sie eine Top-Positionierung in Javascript

So implementieren Sie die Top-Funktion in JavaScript: 1. Ermitteln Sie den Abstand vom Element zum oberen Rand des Browserfensters über getBoundingClientRect; 2. Implementieren Sie die Top-Funktion über „$(document).scrollTop() for(.. .)"-Methode.

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

JavaScript implementiert die Pinned-Funktion

Es gibt viele Möglichkeiten, die Pinned-Funktion mit JavaScript zu implementieren. Es scheint etwas kompliziert zu sein, ich brauche es für etwas, das ich kürzlich gemacht habe Ich habe im Internet nach Informationen gesucht und 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: Die for-Anweisung verwendet var i anstelle von let i. Der Timer muss mit einer Funktion zur sofortigen Ausführung umschlossen werden, 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 erreichen Sie eine Top-Positionierung in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!