Fix an element on scroll until it reach a certain position in the page

scrollToFixedPos

function scrollToFixedPos() {

    // containter to fix to and element to scroll
    const $refElToFixTo = $('.ref-el-to-fix-to');
    const $elToFix = $('.el-to-fix')
    
    //$padding is 15% of window height to adapt the placement of the scrolling element
    const $wHeight = $(window).innerHeight();
    const $padding = $wHeight * 15 / 100;
    
    //default top position of the scrolling element
    let $elTop = 70;

    $(window).on('scroll', function () {
        if ($(window).scrollTop() >= $refElToFixTo.offset().top) {

            $elTop = ($(window).scrollTop() - $refElToFixTo.offset().top) * -1 + $padding;
            $elToFix.css({
                top:  $elTop + 'px'
            });
        }
    });
}