title: How to PUSH Fixed Sidebar up when as Footer is scrolled into view - No 3rd party libraries, please
body: <p>I saw a possible solution to this <a href="https://stackoverflow.com/questions/25600327/fixed-sidebar-pushed-up-by-footer">HERE</a>, but I'm hoping I can do this without adding a third-party plugin to my evergrowing list of included libraries.</p>
  
  <p>I have a simple Bootstrap 4 layout, a main col-8 section, a secon col-4 sidebar, and underneath a footer:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row row-eq-height m-0 p-0 h-100"&gt;
       &lt;div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3"&gt;MAIN CONTENT&lt;/div&gt;
       &lt;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"&gt;SIDEBAR&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer class="container-fluid container-footer pt-4 pb-1"&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>What I want to do is allow the user to scroll through the <code>MAIN</code> Column, while the <code>FIXED-SIDE</code> sidebar stays fixed <code>(class fixed-side sets position:fixed, top: inherit, z-index: 0)</code>. When the footer comes into view, I want to offset the top value by however many pixels the footer is seen.</p>
  
  <p>I have tested in developer tools that this would probably be the easiest way to manipulate the top value of the <code>FIXED-SIDE</code> sidebar. I just do not know how to target the "in-window" height of an element.</p>
  
  <p>I'm looking to accomplish this in javascript or jQuery, instead of importing a new script and calling that script.</p>