Автоматически настраивать значение прокрутки при изменении размера окна

Question

Я просматриваю изображения одно за другим. Изображения переходят к следующему / предыдущему, когда окно большое. Однако, когда я изменяю размер окна, а затем прокручиваю, изображения пропускаются. Я ищу способ сохранить то же значение, которое я использую для прокрутки, при изменении размера окна до любого размера. Как мне этого добиться?

Вот мой код на JSFiddle:

 var pageno = 1; //global variable  

 document.addEventListener('wheel', function(e) {
    e.preventDefault();
    
}, { passive: false });

$(document).ready(function() {

    
    /* Scroll event handler */
    $(window).bind('scroll',function(e){
        
        parallaxScroll();

    });



    document.addEventListener("keydown", function(event) {
        //console.log(event.which);
        if(event.which == "39") //Right Key keyboard
        {
    
            if(pageno == 1) 
            {
       
                $('a.SecondPage').click();
       
            }



        }
        else
        if(event.which == "37") //Left Key keyboard
        {
            

            if(pageno == 2)
            {
                $('a.FirstPage').click();
            }
            
            
        }
      })
    
    /* Next/prev and primary nav btn click handlers */
    $('a.FirstPage').click(function(){
    
        pageno= 1;
        //console.log(pageno);
        $('html, body').animate({
            scrollTop:0,
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS
            
            
        });
        return false;
    });
  
    $('a.SecondPage').click(function(){
    
        pageno= 2;
        console.log(pageno);
        $('html, body').animate({
            scrollTop:500,
            
            
            
        }, 2000, function() {
            parallaxScroll(); // Callback is required for iOS

        });
        return false;
    });


    
});

/* Scroll the background layers */
function parallaxScroll(){

        var scrolled = $(window).scrollTop();

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



}

#parallax-bg3 {
    z-index: 1;
    
    position: fixed;
        width: 100%;
    padding-top: 56.25%;/* 16:9 Aspect Ratio */

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

    }
    #bg3-1 {
        position: absolute;
    top: 0;
        left: 0%;

        width: 50%;
    
        
        }
        #bg3-2 {
        position: absolute;
        top: 0px;
      left: 80%;
          width: 50%;

            }

<div id="parallax-bg3">
            
            <!-- Parallax  background City -->
            <div id="parallax-bg1">
                <img  id="bg3-1" src="https://via.placeholder.com/300.png/09f/fff

C/O https://placeholder.com/" alt="First Page"/>
                <img id="bg3-2" src="https://via.placeholder.com/300/09f/fff.png

C/O https://placeholder.com/" alt="Second Page"/>

            </div>
  </div>