title: How do I stop a fixed sidebar from overlapping the footer with jQuery?
body: <p><strong>Note:</strong> The <a href="https://stackoverflow.com/questions/52062163/how-to-make-a-sidebar-sticky-when-scrolling-between-header-and-footer-with-jquer">"duplicate" linked</a> is another post of mine (inadvertently posted twice). I've already flagged the duplicates for removal. </p>
  
  <p>I need a strictly jQuery solution for this problem. This is because I'm using Wordpress and the sidebar widget that I want to make sticky is inside an <code>&lt;aside&gt;</code> element which I cannot make full height.</p>
  
  <p>In the same way that <code>.scrollTop()</code> detects how far down the page I am to make the sidebar widget sticky I need JS detect how far up I am from the bottom of the page to "unstick" the widget via assigning a new fixed position.</p>
  
  <p>I tried to to this with <code>.offset()</code> but I have been unable to make it work so far. </p>
  
  <pre><code>  function stopDiv() {
      var distance = $('.footer').offset().top - $('.widget').offset().top;
      if (distance &lt; 10) {
        $('.widget').css({
          'top': 'auto',
          'bottom': '10px'
        });
      }
    }
  </code></pre>
  
  <p>As you can see in the snippet below my sidebar scrolls as it should, but I want the sidebar to assume a new fixed position when I reach &lt;10px distance from the footer.</p>
  
  <p>I want the sidebar to assume a new fixed position above the footer until the user scrolls back up. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  // Fixed Widget
    function fixDiv() {
      var $cache = $('.widget');
      if ($(window).scrollTop() &gt; 380)
        $cache.css({
          'position': 'fixed',
          'top': '10px',
          'right': '30px'
        });
      else
        $cache.css({
          'position': 'relative',
          'top': 'auto',
          'right': 'auto'
        });
    }
    $(window).scroll(fixDiv);
    fixDiv();
  
  /* My attempt 
    function stopDiv() {
      var distance = $('.footer').offset().top - $('.widget').offset().top;
      if (distance &lt; 10) {
        $('.widget').css({
          'top': 'auto',
          'bottom': '10px'
        });
      }
    }
    $(window).scroll(stopDiv);
    stopDiv();
    */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
  * {
    font-family: 'Open Sans';
    color: #fff;
    box-sizing: content-box;
  }
  
  body {
    padding: 0;
    margin: 0;
  }
  
  p {
    margin: 20px;
  }
  
  hr {
    width: 85%;
    border-style: solid;
  }
  
  .main-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px auto;
    grid-template-areas: "nav nav nav nav" "main main main sidebar";
    grid-column-gap: 20px;
    grid-row-gap: 0px;
  }
  
  .nav {
    grid-area: nav;
    background-color: #266392;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
  }
  
  .nav h1 {
    place-self: center;
    font-weight: 400;
    font-size: 40px;
    grid-column: 2;
  }
  
  .nav i {
    align-self: center;
    font-size: 40px;
  }
  
  .main {
    height: 1500px;
    width: 98%;
    justify-self: start;
    grid-area: main;
    padding: 10px;
    float: left;
    background-color: #e8624c;
    margin: 10px;
  }
  
  .sidebar-container {
    height: 900px;
    width: 300px;
    justify-self: start;
    background-color: #209B66;
    grid-area: sidebar;
    grid-column: 4;
    top: 10px;
    margin: 10px;
    padding: 20px;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 10px;
  }
  
  .sidebar-container&gt;p {
    display: grid;
    align-items: start;
    padding: 0;
    margin: 0;
  }
  
  .widget {
    height: 500px;
    width: 300px;
    background-color: #E3962F;
  }
  
  .footer {
    background-color: #333;
    height: 800px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div class="main-content"&gt;
      &lt;div class="nav"&gt;
        &lt;h1&gt;Sticky Sidebar Problem&lt;/h1&gt;
        &lt;i class="fa fa-arrow-down" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
        &lt;p&gt;
          [Main Content]
        &lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="sidebar-container"&gt;
        &lt;p&gt;[Sidebar Container]&lt;/p&gt;
  
        &lt;div class="widget"&gt;
          &lt;p&gt; [Widget]&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>