Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin Semasa Menatal?

Menyemat Div ke Bahagian Atas Skrin

Untuk mencapai kesan yang diingini, letakkan div di bawah kandungan lain dan tetapkan kedudukan asalnya kepada mutlak atau relatif. Setelah halaman ditatal cukup untuk tepi atas div untuk diselaraskan dengan port pandangan, ubah suai kedudukan kepada tetap dan tetapkan semula nilai teratas kepada sifar.

CSS:

.sticky-div {
    position: absolute;
    top: initial;
    width: 100%;
}

.sticky-div.fixed {
    position: fixed;
    top: 0;
}

JavaScript (jQuery):

$(window).scroll(function() {
    var div = $('.sticky-div'),
        scrollTop = $(this).scrollTop();

    if (scrollTop > 200) {
        div.addClass('fixed');
    } else {
        div.removeClass('fixed');
    }
});

Apabila scrollTop melebihi 200, div menjadi tetap dan menatal dengan viewport. Menatal kembali ke atas mengalih keluar kelas tetap, memulihkan kedudukan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!