>

다음과 같은 스크롤 효과를 만들고 싶습니다

스크롤하는 동안 : 첫 번째 div (.section-one)가 컨테이너 상단으로 스크롤되면 고정됩니다. 두 번째 div (.section-two) 이전 div와 동일한 컨테이너의 맨 위로 스크롤하여 고정됩니다.

. 섹션 2 커버. 섹션 1, 섹션 3 커버 섹션 2 등 카드 효과의 종류. 나는 그것을하는 방법에 대한 아이디어가 있습니다. 하지만 아직 거기에 없습니다.

저도 일반 JavaScript를 사용할 수 있습니다

내가 언급하고 싶습니다. 이것은 스크롤하는 동안 배경 컨텐츠 (즉, 이미지)가 전경 컨텐츠와 다른 속도로 이동하는 시차 스크롤이 아닙니다.

고정 레이어와 겹치는 전경 레이어입니다

           .fixed {
                left: 0;
                position: fixed;
                right: 0;
                z-index: 0;
            }
            .section-one, section-two .section-three {
                height: 100vh;
            }

            .scroll-contain {
                overflow-y: hidden;
            }

            function sticktothetop() {
                var element_top = $('.scroll-contain').scrollTop();
                var top = $('#top-of-element').offset().top;
                if (element_top > top) {
                    $('.section-one').addClass('fixed');
                    $('#top-of-element').height($('.section-one').outerHeight());
                } else {
                    $('.section-one').removeClass('fixed');
                    $('.section-one').height(0);
                }
            }
            $(function() {
                $(window).scroll(sticktothetop);
                sticktothetop();
            });
        <div class="scroll-contain">
        <div id="top-of-element"></div>
            <section class="section-one" style="background-color: yellow">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>
            <section class="section-two" style="background-color: pink">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>
            <section class="section-three" style="background-color: orange">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>              
        </div>             

  • 답변 # 1

    내가 실수하지 않으면, 당신은 다소 position: sticky 를 찾고 있습니다  효과.

    이 작업을 시도하고 요청과 일치하는지 확인하십시오 (JS 필요 없음) :

    .section-one, section-two .section-three {
        position: sticky;
        top: 0;
    }
    
    

    position: sticky 에 대한 자세한 정보를 찾아 보는 것도 좋습니다. , 그리고 귀하의 요구에 어떻게 적용 할 수 있을까요?

관련 자료

  • 이전 Timer to throw Method Once a Week - 일주일에 한 번 메서드를 throw하는 타이머 - c #, aspnet
  • 다음 Firebase 클라우드 기능의 지오 파이어 쿼리