CSS로 스크롤 애니메이션 범위를 제한하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS로 스크롤 애니메이션 범위를 제한하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-11-12 10:11:01

원래의

619명이 탐색했습니다.

How to Limit Scroll Animation Range with CSS?

창 스크롤 애니메이션의 CSS 값에 대한 경계 설정

문제 설명

동적 스크롤 효과를 구현할 때 사용자의 스크롤에 맞춰 이동하는 지도이므로 사용자가 페이지 하단까지 끝없이 도달하지 않도록 스크롤 범위를 제한하는 것이 바람직할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!