How to PUSH Fixed Sidebar up when as Footer is scrolled into view - No 3rd party libraries, please

Question

I saw a possible solution to this HERE , but I'm hoping I can do this without adding a third-party plugin to my evergrowing list of included libraries.

I have a simple Bootstrap 4 layout, a main col-8 section, a secon col-4 sidebar, and underneath a footer:

<div class="container-fluid">
<div class="row row-eq-height m-0 p-0 h-100">
     <div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3">MAIN CONTENT</div>
     <div class="col-12 col-lg-5 offset-lg-7 col-xl-4 offset-xl-8 order-1 order-lg-2 p-0 fixed-side">SIDEBAR</div>
</div>
</div>
<footer class="container-fluid container-footer pt-4 pb-1"></footer>

What I want to do is allow the user to scroll through the MAIN Column, while the FIXED-SIDE sidebar stays fixed (class fixed-side sets position:fixed, top: inherit, z-index: 0) . When the footer comes into view, I want to offset the top value by however many pixels the footer is seen.

I have tested in developer tools that this would probably be the easiest way to manipulate the top value of the FIXED-SIDE sidebar. I just do not know how to target the "in-window" height of an element.

I'm looking to accomplish this in javascript or jQuery, instead of importing a new script and calling that script.

Answer 1

Consider using position: sticky; - it could help to achieve your 'fixed position' sidebar, but still allow scrolling in your main <div> .

https://css-tricks.com/position-sticky-2/