Bagaimana untuk Mencipta Div Melekit Yang Melekat pada Bahagian Atas Skrin pada Tatal?

Mencipta Div Melekit Yang Melekat pada Bahagian Atas Skrin

Isu:

Anda berusaha untuk mencipta div yang kekal di bawah blok kandungan pada mulanya. Walau bagaimanapun, apabila menatal ke bawah halaman dan mencapai sempadan atas div, ia menjadi tetap dan menatal bersama halaman.

Penyelesaian:

Menggunakan CSS dengan atribut kedudukan tetap mencapai yang diinginkan kefungsian:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Edit:

Untuk memastikan div kekal melekit, ia sepatutnya mempunyai kedudukan mutlak pada mulanya. Apabila mencapai mengimbangi tatal elemen, kedudukan berubah kepada tetap, dengan kedudukan teratas ditetapkan kepada sifar.

Kesan mengimbangi tatal atas dokumen menggunakan fungsi tatal atas:

$(window).scroll(function(e) {
    var $el = $('.fixedElement');
    var isPositionFixed = ($el.css('position') == 'fixed');
    if ($(this).scrollTop() > 200 && !isPositionFixed) {
        $el.css({'position': 'fixed', 'top': '0px'});
    }
    if ($(this).scrollTop() < 200 && isPositionFixed) {
        $el.css({'position': 'static', 'top': '0px'});
    }
});

Apabila tatal offset mencapai 200, elemen menjadi tetap dan melekat pada bahagian atas tetingkap penyemak imbas.

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