창 스크롤 애니메이션의 CSS 값 제한을 제한하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

창 스크롤 애니메이션의 CSS 값 제한을 제한하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-11 20:18:03

원래의

650명이 탐색했습니다.

How to Limit CSS Value Limits of Window Scrolling Animation?

창 스크롤 애니메이션의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：컨테이너 내에서 인라인 블록 요소를 수직 정렬하지 않는 이유는 무엇입니까? 다음 기사：내 CSS "왼쪽" 속성이 내 요소를 중앙에 배치하지 않는 이유는 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2345

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2474