<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://rawgit.com/charlesbjohnson/bootstrap/affix-bottom-use-bottom-offset/dist/js/bootstrap.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <header class="container-header row">
        <div class="col-sm-12">
          HEADER
        </div>
      </header>
      <main class="row split-container">
        <div class="col-sm-9 filler-container">
          FILLER
        </div>
        <div class="col-sm-3 sticky-container">
          <div class="sticky-wrapper js-sticky-wrapper">
            <header class="sticky-top">
              TOP
            </header>
            <footer class="sticky-bottom">
              BOTTOM
            </footer>
          </div>
        </div>
      </main>
      <footer class="container-footer row">
        <div class="col-sm-12">
          FOOTER
        </div>
      </footer>
    </div>
  </body>

</html>
$(document).ready(function() {
  $(".js-sticky-wrapper").affix({
    offset: {
      top: 600,
      bottom: 600
    }
  });
});
.container-header, .container-footer, .filler {
  height: 600px
}

.filler-container {
  height: 1000px;
}

.affix.sticky-wrapper {
  top: 0;
}

.affix-bottom.sticky-wrapper {
  position: absolute;
}

.sticky-top, .sticky-bottom {
  height : 100px;
}

.sticky-top {
  margin-bottom: 25px;
}

.sticky-bottom {
  margin-top: 25px;
}




.container-header {
  background-color: teal;
}

.filler-container {
  background-color: pink;
}

.sticky-container {
  background-color: antiquewhite;
}

.sticky-top {
  background-color: tomato;
}

.sticky-bottom {
  background-color: lightblue;
}

.container-footer {
  background-color: purple;
}