title: How to make left and right sidebar sticky scroll (at uneven height) and to scroll left and right only when left and right bottom matches?
body: <p>If I tried with position fixed the left and alignment is changing in all windows size hence we can use the content as user wish we do not mention the height for left and right blocks</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>function sticky_relocate() {
    var window_bottom = $(window).scrollTop() + $(window).height();
    var left_con_bot = $('.container-left').offset().top + $('.container-left').outerHeight(true);
    var right_con_bot = $('.container-right').offset().top + $('.container-right').outerHeight(true);
    var lft = $('.container-left').height();
    var rft = $('.container-right').height();
  
  
    if ((rft &gt; lft) &amp;&amp; (window_bottom == left_con_bot)) {
      $('.container-left').css({
        bottom: 0,
        position: 'sticky'
      })
    } else if ((rft &lt; lft) &amp;&amp; (window_bottom == right_con_bot)) {
      $('.container-right').css({
        bottom: 0,
        position: 'relative'
      })
    } else {
      $('.container-right').addClass('stick');
      $('.container-left').addClass('stick');
    }
  }
  $(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.stick {
    position: relative;
  }
  .wrapper{
    max-width :1200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-8 container-left"&gt;
        grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll only
      &lt;/div&gt;
      &lt;div class="col-lg-4 container-right"&gt;
        grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll only grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer
        how do I make elements fixed on screen and post scroll only
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-lg-12 pop_block"&gt; Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll with fixed headers and footer how do I make elements fixed on screen and post scroll only &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Kindly suggest me (right&gt;left) at this state left bottom when comes to window bottom it should remain as it is and right side to scroll till its bottom match the left bottom likewise for (left&gt;right)</p>
  <p>the above code not working for the above condition I tried with sticky</p>