Bagaimana untuk Mengehadkan Julat Animasi Tatal dengan CSS?

Menetapkan Had pada Nilai CSS untuk Animasi Tatal Tetingkap

Pernyataan Masalah

Apabila melaksanakan kesan tatal dinamik, seperti sebagai peta yang bergerak selari dengan skrol pengguna, mungkin wajar untuk mengehadkan julat tatal untuk menghalang pengguna daripada sampai ke bahagian bawah halaman tanpa henti.

Pendekatan Penyelesaian dengan CSS

Menggunakan kaedah animate() dengan acara tatal boleh membawa kepada konflik dan gelung animasi tak terhingga. Sebaliknya, pertimbangkan untuk menggunakan kaedah CSS untuk menetapkan margin atas:

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal > offset.top) {
        $sidebar.css({'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'});
    } else {
        $sidebar.css({'margin-top': '0px'});
    }
});

Pendekatan Alternatif untuk Penentududukan Elemen

Dalam kes di mana elemen penentududukan menggunakan margin atas mungkin tidak boleh dilaksanakan, pendekatan alternatif boleh digunakan. Pertimbangkan senario di mana gelagat yang diingini adalah untuk membetulkan elemen apabila menatal mencapai titik tertentu:

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
       var scrollVal = $(this).scrollTop();
        if (scrollVal > headerH) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​

Atas ialah kandungan terperinci Bagaimana untuk Mengehadkan Julat Animasi Tatal dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!