Вычислить scaleTop автоматически с текущей высотой окна - PullRequest
0 голосов
/ 04 августа 2020

Я установил свойство scaleTop для окна 1920x1080, и оно хорошо работает при анимации прокрутки. Однако, когда я изменяю размер окна, значение scaleTop не работает должным образом из-за размера прокрутки. Например, в окне 1920x1080 установка scaleTop как 1500 немного сдвинется вперед. Однако при изменении размера окна до меньшего размера scaleTop as 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 Ответ

0 голосов
/ 04 августа 2020

Если кто и ищет ответ, я так рассчитал. Получить позицию элемента 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');

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...