Sticky Box

by Sam Fereday

HTML

<div class="stickyBox">
  I'm sticky.
</div>

Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content
<br />Content

CSS

body {
  padding: 0;
  margin: 0;
  font: 85%/1.4em arial;
}

.stickyBox {
  margin-left: 0;
  margin-top: 1em;
  padding: 1em;
  background: #ccc;
  color: #fff;
  box-sizing: border-box;
  transition: all 0.2s ease; 
}

.stickyBox.isSticky {
  margin-left: 30%;
  position: fixed;
  right: 0;
}

JavaScript

var sticky = $('.stickyBox'),
doc = $(document),
scrollTop = 0,
w = 100,
pos = 'static';

$(document).on('scroll', function(){
  sticky[0].className = sticky.scrollTop() < doc.scrollTop() && doc.scrollTop() > 0 ? 'stickyBox isSticky' : 'stickyBox';
});