Sidebar Fixed Scrolling Bottom

by Marius Jopen

HTML

<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
<div class="content">

  <div class="sidebar tall">
    In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodal quam enim vel ipsum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula
    vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
  </div>

  <div class="main short">
    This is the main column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare
    quam enim vel ipsum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetures venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
    porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula
    vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornarees venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
    porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula
    vel neque cursus laoreet....

CSS

.content {
  overflow: hidden;
}

.content .sidebar {
  width: 200px;
  float: left;
}

.content .item {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  overflow: hidden;
}

.content .main {
  margin-left: 222px;
  height: auto;
  overflow: hidden;
}

.content .main.short {
  height: auto;
}

JavaScript

// Generated by CoffeeScript 1.9.2
(function() {
  var reset_scroll;

  $(function() {
    return $(".sidebar").stick_in_parent({
      parent: ".content"
    });
  });

  reset_scroll = function() {
    var scroller;
    scroller = $("body,html");
    scroller.stop(true);
    if ($(window).scrollTop() !== 0) {
      scroller.animate({
        scrollTop: 0
      }, "fast");
    }
    return scroller;
  };

  window.scroll_it = function() {
    var max;
    max = $(document).height() - $(window).height();
    return reset_scroll().animate({
      scrollTop: max
    }, max * 3).delay(100).animate({
      scrollTop: 0
    }, max * 3);
  };

  window.scroll_it_wobble = function() {
    var max, third;
    max = $(document).height() - $(window).height();
    third = Math.floor(max / 3);
    return reset_scroll().animate({
      scrollTop: third * 2
    }, max * 3).delay(100).animate({
      scrollTop: third
    }, max * 3).delay(100).animate({
      scrollTop: max
    }, max * 3).delay(100).animate({
      scrollTop: 0
    }, max * 3);
  };

  $(window).on("resize", (function(_this) {
    return function(e) {
      return $(document.body).trigger("sticky_kit:recalc");
    };
  })(this));

}).call(this);