Using hero Image in about section by scrolling and resizing on scroll

Question

I am building my portfolio website and I thought of using the hero section image into the next section of about us by moving and resizing the image, as a guess I have fixed about the height of 700px up to which image has to scroll. But the problem is that it is not working on resizing screen size. Is there a way to move it such that it always fits in about section on scrolling? Below is code snippets and gif showing the problem.

<!--HTMl-->
<section class="hero" id="hero">
    <div id="hero-img" class="hero-img" ><img  src="main.png"></div>   
</section>

/*CSS*/
.hero .hero-img{
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    bottom: 0;
    max-height: auto;
    max-width: 100%;  
}
.hero .hero-img img{
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;  
}

//JavaScript//
$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
    var scr = $(window).scrollTop();
   var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();  
   if(scr<690){
       $('.hero-img').css('top',(0-(scrolled*1.1))+'px');
       $('.hero-img').css('right',(0-(scrolled*.3))+'px');
    }
    else
    {
        $('.hero-img').css('top',('top'-(scrolled*1.1))+'px');
        $('.hero-img').css('right',('right'-(scrolled*.3))+'px');
    }
   
}

Problem with resizing

Answer 1

What does the code do:

Takes the position of the element with ID id ="skills" and subtracts from this value the height of the DIV element in which the picture is and sets this value as the maximum for scrolling.

You had set the 690 manually. The change is that now this IF listening automatically which will come first the id ="skills" or 690

I hope I've been helpful

$(window).bind('scroll', function (e) {
    parallaxScroll();
});

function parallaxScroll() {
    var scr = $(window).scrollTop();
    var nel = $("#skills").offset().top - $("#hero-img").height();
    
    var scrolled = $('#hero-img').length - $(window).scrollTop();

    if (scr < nel && scr < 690) {
        $('.hero-img').css('top', (0 - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right', (0 - (scrolled * .3)) + 'px');
    }
    else {
        $('.hero-img').css('top', ('top' - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right', ('right' - (scrolled * .3)) + 'px');
    }

}

.hero .hero-img {
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    /* bottom: 0; */
    top: 0px;
    max-height: auto;
    max-width: 100%;
}

.hero .hero-img img {
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<section class="hero" id="hero">
    <div id="hero-img" class="hero-img">
        <img src="main.png">
    </div>
</section>

<div>
    ABOUT
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="skills">
    SKILLS
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>