창 스크롤 애니메이션의 CSS 값 제한을 제한하는 방법은 무엇입니까?
- Patricia Arquette원래의
- 2024-11-11 20:18:03650검색
창 스크롤 애니메이션의 CSS 값 제한
이 시나리오에서 사용자는 스크롤할 때 지도 요소가 미끄러지는 문제를 경험하고 있습니다. 페이지 아래로. 그러나 지도는 무한정 계속 스크롤되므로 바닥글로 인해 사용자가 페이지 하단에 도달할 수 없습니다.
목표는
동적으로 크기가 조정된 다른
의 맨 아래에 도달할 때 지도를 나타냅니다.
제공된 JavaScript 코드는 사용자가 스크롤할 때 지도가 이동하도록 애니메이션을 적용합니다.
<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
});
}
});
});
문제 해결
스크롤 함수 내에서 animate() 메서드를 사용하는 것은 스크롤 값의 지속적인 변경으로 인해 충돌이 발생하여 jQuery가 반복적인 애니메이션을 수행하지 못하게 할 수 있으므로 권장하지 않습니다. stop() 함수만으로는 문제가 완전히 해결되지 않을 수 있습니다.
대신 CSS 방식을 활용하는 것이 좋습니다. 예는 다음과 같습니다.
<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'});
}
});
또한 계산에 여러 개의 if else 문을 사용하지 마세요. 충돌이 발생할 수도 있습니다.
대체 접근 방식
특정 스크롤 위치에서 탐색 요소를 수정하는 것이 목표인 시나리오의 경우 다음 접근 방식을 고려하세요.
<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'});
}
});
});
위 내용은 창 스크롤 애니메이션의 CSS 값 제한을 제한하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.