Sticky-kit basic example

A jQuery plugin for making smart sticky elements Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible. Source: http://leafo.net/sticky-kit/

by will525

HTML

<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

CSS

* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}

.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}

.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}

.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}

.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}

.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}

.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}

.top {
  position: absolute;
  top: 10px;
}

.bottom {
  position: absolute;
  bottom: 10px;
}

.clear {
  clear: both;
  float: none;
}

JavaScript

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(".sidebar").stick_in_parent({
  offset_top: 10
});