<header></header>
<aside class="natural">Sticky Sidebar</aside>
<article></article>
<article></article>
<article></article>
<footer></footer>
header, article, footer {margin: 20px auto;}
header, footer {width: 450px; height: 100px; background-color: #8FDB9E;}
footer {height: 700px;}
article {width: 300px; position: relative; right: -75px; height: 250px; background-color: #B9E09F;}
aside {width: 130px; right: 50%; margin-right: 95px; height: 200px; background-color: #58B885; position: absolute;}

aside.fixed {position: fixed;}

aside {font-family: Helvetica, sans-serif; font-weight: bold; color: #fff; font-size: 2.5em; letter-spacing: -3px; line-height: 0.8em;}

body {background-color: #E2E6D3;}
$stick = $('aside');
$foot = $('footer');
margin = 20;
offtop = $stick.offset().top - margin;
offbtm = $foot.offset().top - ( margin*2 + $stick.height() );

$(window).scroll(function () {
	scrtop = $(window).scrollTop();
  if (scrtop > offtop && $stick.hasClass('natural')) {
    $stick.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offtop > scrtop && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (scrtop > offbtm && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('bottom').css('top', offbtm+margin);
  }
  if (offbtm > scrtop && $stick.hasClass('bottom')) {
    $stick.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js