Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengehadkan Had Nilai CSS bagi Animasi Tatal Tetingkap?
Bagaimana untuk Mengehadkan Had Nilai CSS bagi Animasi Tatal Tetingkap?
- Patricia Arquetteasal
- 2024-11-11 20:18:03614semak imbas
Mengehadkan Had Nilai CSS bagi Animasi Tatal Tetingkap
Dalam senario ini, pengguna mengalami isu di mana elemen peta meluncur semasa mereka menatal ke bawah halaman. Walau bagaimanapun, peta terus menatal selama-lamanya, menghalang pengguna daripada sampai ke bahagian bawah halaman kerana kehadiran pengaki.
Matlamatnya adalah untuk mengehadkan penatalan
Kod JavaScript yang disediakan menghidupkan peta untuk bergerak semasa pengguna menatal:
<pre class="brush:php;toolbar:false">$(function() {
var $sidebar = $("#map"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
}
else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
Menangani Isu
Menggunakan kaedah animate() dalam fungsi tatal bukanlah dinasihatkan kerana ia boleh membawa kepada konflik kerana perubahan berterusan dalam nilai skrol, menghalang jQuery daripada melakukan animasi berulang. Fungsi stop() sahaja mungkin tidak menyelesaikan isu sepenuhnya.
Sebaliknya, adalah disyorkan untuk menggunakan kaedah CSS. Berikut ialah contoh:
<pre class="brush:php;toolbar:false">$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > offset.top) {
$sidebar.css({
'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'
//added +'px' here to prevent old internet explorer bugs
});
} else {
$sidebar.css({'margin-top':'0px'});
}
});
Selain itu, elakkan menggunakan berbilang pernyataan if else dalam pengiraan anda, kerana ini juga boleh menyebabkan konflik.
Pendekatan Alternatif
Untuk senario yang matlamatnya adalah untuk membetulkan elemen navigasi pada kedudukan tatal tertentu, pertimbangkan perkara berikut pendekatan:
<pre class="brush:php;toolbar:false">$(document).ready(function() {
$(window).scroll(function() {
var headerH = $('.header').outerHeight(true);
//this will calculate header's full height, with borders, margins, paddings
console.log(headerH);
var scrollVal = $(this).scrollTop();
if ( scrollVal > headerH ) {
//when scroll value reach to your selector
$('#subnav').css({'position':'fixed','top' :'0px'});
} else {
$('#subnav').css({'position':'static','top':'0px'});
}
});
});
Atas ialah kandungan terperinci Bagaimana untuk Mengehadkan Had Nilai CSS bagi Animasi Tatal Tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!