Bagaimanakah Saya Boleh Membuat Div Melekat pada Bahagian Atas Skrin pada Tatal?

Membuat Div Melekat pada Bahagian Atas Skrin Semasa Menatal

Mencipta div yang kekal tetap di bahagian atas skrin selepas ambang tatal tertentu boleh dicapai menggunakan CSS atau JavaScript.

CSS Penyelesaian

Menggunakan CSS, anda boleh meletakkan div sebagai tetap sebaik sahaja tepi atasnya mencapai bahagian atas skrin:

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Penyelesaian JavaScript

Dengan JavaScript, anda boleh menukar kedudukan div secara dinamik apabila kedudukan tatal mencapai tertentu value:

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});

Dalam skrip ini, fungsi tatal() jQuery digunakan untuk mendengar acara tatal. Apabila kedudukan scrollTop melebihi 200, div diberi kedudukan tetap dan ditetapkan ke bahagian atas halaman. Apabila scrollTop turun di bawah 200, div kembali ke kedudukan statik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Melekat pada Bahagian Atas Skrin pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!