문제 설명
동적 스크롤 효과를 구현할 때 사용자의 스크롤에 맞춰 이동하는 지도이므로 사용자가 페이지 하단까지 끝없이 도달하지 않도록 스크롤 범위를 제한하는 것이 바람직할 수 있습니다.
CSS를 이용한 솔루션 접근
스크롤 이벤트와 함께 animate() 메서드를 사용하면 충돌이 발생하고 애니메이션 무한 루프가 발생할 수 있습니다. 대신 margin-top 설정을 위해 CSS 방법을 사용하는 것을 고려해 보십시오:
$(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'}); } });
요소 위치 지정을 위한 대체 접근 방식
margin-top을 사용하여 요소를 배치할 수 없는 경우 실행 가능하다면 대체 접근 방식을 사용할 수 있습니다. 스크롤이 특정 지점에 도달하면 요소를 수정하는 것이 원하는 동작인 시나리오를 생각해 보세요.
$(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'}); } }); });
위 내용은 CSS로 스크롤 애니메이션 범위를 제한하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!