How to make a fixed sidebar stop at the end of a container

Question

I have a container with two columns, one of which holds a sidebar.

JSFiddle

The sidebar is fixed, and when it gets near the bottom I used jQuery to alter the bottom to have it roughly stay at the bottom of the container.

How can I make it so it stops moving perfectly when it hits the bottom of the container (outlined in red)? It would have to work for a sidebar of any height.

HTML

<div class="container">
  <div class="col-left">
    <div class="sidebar">
      fixed sidebar
    </div>
  </div>

  <div class="col-right">
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
  </div>
</div>

<footer>Footer</footer>

CSS

.container {
  outline: 1px solid red;
  position: relative;
}

.col-left {
  width: 58%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
  height: 100%;
}

.col-right {
  width: 40%;
  display: inline-block;
  outline: 1px solid black;
  vertical-align: top;
}

.sidebar {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 200px;
  width: 100px;
  background: #fff;
}

footer {
  background: #000;
  width: 100%;
  height: 300px;
  margin-top: 100px;
  color: #fff;
}

jQuery (Doubt it'll be of use I think it needs to be rethought)

jQuery(window).scroll(function(){
  var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height();
  console.log(scrollBottom);

     if (scrollBottom < 300){
         jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420));
       jQuery('.sidebar').css('top', 'auto');
     } else {
       jQuery('.sidebar').css('bottom', 'auto');
       jQuery('.sidebar').css('top', '50px');
     }

Answer 1

Here's a jQuery solution whipped up by calculating heights of the relevant elements, and factoring in the current scroll position of the page. When the sidebar would normally move outside of its container, a .lock class is added to it that unfixes it with CSS.

Working example below:

 var $sidebar = $('.sidebar'); var $container = $('.container'); var sideBottom = $sidebar.offset().top + $sidebar.height(); var contBottom = $container.offset().top + $container.height(); $(window).scroll(function() { if (window.scrollY + sideBottom > contBottom) { $sidebar.addClass('lock'); } else if ($sidebar.hasClass('lock')) { $sidebar.removeClass('lock'); } });

 body { background: #eee; margin: 0; } .container { outline: 1px solid red; position: relative; } .col-left { width: 58%; display: inline-block; outline: 1px solid black; vertical-align: top; height: 100%; } .col-right { width: 40%; display: inline-block; outline: 1px solid black; vertical-align: top; } .sidebar { position: fixed; top: 50px; left: 50px; height: 140px; width: 100px; background: #fff; } .sidebar.lock { position: absolute; bottom: 0; top: auto; } footer { background: #000; width: 100%; height: 400px; margin-top: 100px; color: #fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="col-left"> <div class="sidebar"> fixed sidebar </div> </div> <div class="col-right"> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p> </div> </div> <footer>Footer</footer>

Answer 2

Try this once it might help you.

.sidebar{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}