Bagaimana untuk meletakkan tetingkap di atas dalam javascript

Cara melaksanakan bahagian atas tetingkap menggunakan JavaScript: 1. Buat fail sampel bahagian hadapan 2. Dapatkan jarak dari elemen ke bahagian atas tetingkap pelayar melalui getBoundingClientRect 3. Gunakan gelung untuk mengekalkan elemen di atas.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk mengekalkan tetingkap di atas dengan JavaScript?

JavaScript melaksanakan fungsi yang disematkan

Terdapat banyak cara untuk melaksanakan fungsi yang disematkan dengan JavaScript yang saya telah gunakan sebelum ini baru-baru ini dibuat, jadi saya juga menggunakannya dalam talian Selepas mencari beberapa maklumat, akhirnya saya menemui kaedah getBoundingClientRect() yang boleh mendapatkan jarak dari elemen halaman ke bahagian atas tetingkap penyemak imbas. Kod akhir adalah seperti berikut:

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)
        }

Tujuan utama menggunakan gelung adalah untuk menjadikan elemen di bahagian atas tidak mengganggu Proses ini boleh dicapai dengan menukar i ialah jika pernyataan for menggunakan var i dan Daripada biarkan i, pemasa perlu dibalut dengan fungsi pelaksanaan segera untuk memastikan i boleh berkuat kuasa serta-merta.

Kesan melekat pada bahagian atas dan berlabuh yang dicapai dengan cara ini adalah serupa Jika anda ingin mencapai bahagian atas terapung (bahagian tertentu ditetapkan pada bahagian atas), anda boleh mempertimbangkan untuk menggunakan position:fixed untuk mencapainya. .
Itu sahaja. . . .

Kajian yang disyorkan: "Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimana untuk meletakkan tetingkap di atas dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!