현재 창 높이로 scaleTop을 자동으로 계산

질문

1920x1080 창의 scaleTop 속성을 설정했으며 스크롤을 애니메이션 할 때 잘 작동합니다. 그러나 창 크기를 조정할 때 스크롤 크기로 인해 scaleTop 값이 예상대로 작동하지 않습니다. 예를 들어 1920x1080 창에서 scaleTop을 1500으로 설정하면 조금 앞으로 이동합니다. 그러나 창 크기를 더 작은 크기로 조정할 때 scaleTop을 1500으로 많이 앞 당깁니다. 그렇다면 창 크기에 관계없이 대상으로 이동하기 위해 scaleTop을 계산하는 공식이 있습니까?

$('a.FirstPage').click(function(){
        $('html, body').animate({
            scrollTop:1500, //setting scaleTop value
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS
            
            
        });
        return false;
    });

function parallaxScroll(){
        var scrolled = $(window).scrollTop();

        $('#parallax-bg1').css('left',(0-(scrolled*1.0))+'px');

}

CSS

#parallax-bg1 {
        z-index: 1;
    
        position: fixed;
        width: 100%;
        margin-top: 10px; /* 70px icon width + 10px margin */
        padding-top: 56.25%;/* 16:9 Aspect Ratio */

        left: 0%; /* align left edge with center of viewport */

        }
        #bg1-1 {
        position: absolute;
        top: 0;
        left: 0%;
        height: 100%;
        width: 100%;
        }

        #bg1-2 {
        position: absolute;
        top: 0px;
        left: 78%;
        height: 100%;
        width:

HTML

<div id="parallax-bg1">
        <img  id="bg1-1" src="img/c.png" />
        <img id="bg1-2" src="img/c.png" />

</div>

답변1

누군가가 답을 찾고 있다면 이것이 내가 계산 한 방법입니다. div 요소의 위치를 가져옵니다. 이것은 창 크기를 조정할 때 자동으로 계산됩니다. 해당 값을 scrollTop에 전달합니다. 왼쪽 위치 만 필요했기 때문에 position.left로 전달했습니다. 이게 전부입니다. 아주 간단

$('a.FirstPage').click(function(){
var position = $('#parallax-bg1 #bg1-2').position();
        $('html, body').animate({
            scrollTop:position.left, //setting scaleTop value
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS
            
            
        });
        return false;
    });

function parallaxScroll(){
        var scrolled = $(window).scrollTop();

        $('#parallax-bg1').css('left',(0-(scrolled*1.0))+'px');

}

 

 

 

 

출처 : https://stackoverflow.com/questions/63242392/calculate-scaletop-automatically-with-the-current-window-height