How to stop background image from scrolling any further past certain depth?

Question

I'm trying to make background image follow scroll until it reaches certain depth (offSetHeight of a certain div), and past that I'm trying to make it stay in certain position. Here are some photos to explain it a bit better:

I've tried doing it in JavaScript, but to no avail as the picture just gets stretched and I can't manage to hit stop when bottom of background image hits upper part of div.

window.onscroll = function() {onScroll()};

function onScroll() {

    let scrollHeight = document.body.scrollTop;
    
    let element = document.getElementById("learnMorePt2IdStandard"); // div where image should stop
    let elementHeight = element.offsetHeight;
    console.log("Element height: " + elementHeight + "\nCurrent height: " + scrollHeight);

    if(scrollHeight <= elementHeight){
        document.body.style.backgroundAttachment = "";
    } else {
        document.body.style.backgroundAttachment = "local";
        document.body.style.backgroundSize  = "auto"
        document.body.style.backgroundColor = rgb(254,220,50); // cover all other parts of background that image won't cover (rgb function is defined and works as intended)
        // document.body.style.objectFit = "cover";
    }
}

I've tried trying different types of background-attachment properties as well as objectFit, but to no avail.

If problem is in background image I can always try to re-edit it but I think it could be done with JavaScript somehow using background-attachment property in CSS. Please let me know if I can explain it any further. Thank you!

EDIT: Here is where I'm trying to get background-image to stop. If user wants to continue scrolling past, picture should stay in place, and as user scrolls down, "the hand" would go above viewing area, and not follow scroll and "hide" behind gray div.