Sticky sidebar from bottom during scrolling

Question

I'm planning to recreate the Medium.com like sidebar. This is what I have now but it's far from over.

Open the JSFiddle below to understand better; I am looking to do the following:

1. When you scroll down, it suddenly sticks to the bottom. How do I make it stick gradually as you scroll?
2. Because it uses position: fixed, it moves towards the right side without respecting the layout. How do I fix this?
3. When you scroll up and there's less space, it overlaps with the header as shown in the screenshot. Again, most likely because position: fixed is used.

How do I fix this? I know there's sticky-kit that does the work but I can't use any plugin.

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      Header and Menu is placed here.
      <hr />
    </div>
    <div class="col-xs-8">
       <p>This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll.</p>
    </div>
    <div class="col-xs-4">
      <div id="sidebar">
        <p>
          This is the sidebar which I want to stop when it reaches the bottom like the one shown in medium dot com
        </p>
      </div>
    </div>
  </div>
</div>

Javascript:

function scrollCheck() {
    var $right = $('#sidebar'),
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        docHeight = $(document).height(),
        rightHeight = $right.height(),
        distanceToTop = rightHeight - windowHeight,
        distanceToBottom = scrollTop + windowHeight - docHeight;
    if (scrollTop > distanceToTop) {

        $right.css({
            'position': 'fixed',
            'bottom': (scrollTop + windowHeight > docHeight ? distanceToBottom  + 'px' : '0px')
        });
    }
    else {
        $right.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }
}

$(window).bind('scroll', scrollCheck);

JSFIDDLE

Answer 1

I'll answer what questions of yours I could. Here is the edited Fiddle first.

As for your questions:

1. The sudden sticking to the bottom is caused because the element isn't the full length of the page so sticking it to the bottom with a fixed position will cause it to jump there. Whereas with the change I made so it sticks to the top there won't have this jump, as the element is at the top of the screen when scrolling so it can be discreetly fixed there.
2. This was because the element didn't have a fixed width and setting position: fixed; means that the elements width is no longer set by the parent, but the view port. So it expands to fill all the width in the view port it can.
3. This was happening because the position: fixed; was never removed when scrolling back above the elements original position, the updated if statement in the Js now removes the class with position: fixed; when scrolling above its original location.

A more detailed look into what I changed.

I added a CSS class so .toggleClass could be used to make the function cleaner.

.docked-sidebar {
  position: fixed;
  top: 0;
}

I also changed the conditions for the if statement so that they worked. Using .offset().top; to get the distance between the sidebar and the top of the page, while removing most of the other variables as they weren't needed. Finally I created bool variable(isDocked) so that the same condition isn't triggered multiple times.

var $right = $('#sidebar'),
  isDocked = false,
  initOffsetTop = $right.offset().top;


function scrollCheck() {
  var scrollTop = $(window).scrollTop(),
    offsetTop = $right.offset().top;

  if (!isDocked && ((offsetTop - scrollTop) < 0)) {
    $right.toggleClass("docked-sidebar");
    isDocked = true;
  } else if (isDocked && scrollTop <= initOffsetTop) {
    $right.toggleClass("docked-sidebar");
    isDocked = false;
  }
}

For sticking to the bottom and then to the top exactly like the example website I recommend checking this question.