Switch position from fixed to the very bottom to initial of a div when you reach its original position on scroll

Question

Here's my problem:

That's an easy div in a quiet complex website. The bar is at the very bottom and it is right before a form.

Essentially, I'm trying to recreate an effect:

When the user will land on the very page, as soon as he scrolls to the bottom the sidebar will appear at the very bottom:

div {
position: fixed;
left:0;
right:0;
bottom:0;
z-index:0
}

Easy stuff plus this will be fired when the document is loaded entirely.

What I'm trying to make it happens is that when the user will scroll to the original position of the div (originally the bar is right before a form) that very div will switch the position to initial, and it will be stuck to the form so the user will have the impression that the div has never changed the position.

Here's my code:

HTML:

<section class="container-fluid contact-banner">
    <ul>
        <li><a href="#">
            <picture>
                <source srcset="/wp-content/themes/wpboot/images/webp/PHONE.webp" type="image/webp">
                <source srcset="/wp-content/themes/wpboot/images/PHONE.png" type="image/png"> 
                <img src="/wp-content/themes/wpboot/images/PHONE.png">
            </picture>1-855-502-2288
        </a></li>
        <li><a href="#">
            <picture>
                <source srcset="/wp-content/themes/wpboot/images/webp/i.webp" type="image/webp">
                <source srcset="/wp-content/themes/wpboot/images/i.png" type="image/png"> 
                <img src="/wp-content/themes/wpboot/images/i.png">
            </picture>Request Info
        </a></li>
    </ul>
</section>

jQuery:

var window_height = $(window).outerHeight();//window height
var phoneBanner_position = $('.contact-banner').offset().top;//position of the element height
var phoneBanner = $('.contact-banner');//the element
var contact_banner = $('.contact-banner').outerHeight();//the height of the element

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;//height on scroll
    if(y_scroll_pos > phoneBanner_position-window_height) {//if the value of the scroll will reach the element
        phoneBanner.removeClass('fixed-banner');//remove fixed position
    } else {
        phoneBanner.addClass('fixed-banner');//add fixed position
    }
});

The css is essential:

.fixed-banner {
    position: fixed;
    bottom: 0;
}

The code actually works but it is really hard to debug in this sense. The effect will be fired some pixel before the browser will touch with the very bottom my element, and it took me some times to figure it out why. Unfortunately, I can't use fixed value because the window will change depends on the size of the window (the website is responsive).

I'm wondering if someone had my same problem in the past.

Thanks

Answer 1

You're doing it fairly straightforwardly, but you may want to look into using scrollTop instead of outerHeight as it returns the element's position in relation to the top of the window. Alternatively, if you don't want to deal with the complications you might consider a library like Waypoints .