Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<section>
  <div id="sticky" class="sticky">
    This div will stick to the top
  </div>
</section>
 
body { 
  margin: 0; 
}
section { 
  height: 2000px;
  padding-top: 100px; 
 }
.sticky { 
  background: orange; 
  width: 100%;
 }
.fixed {
  position: fixed;
  top:0;
 }
 
function findOffset(element) {
  var top = 0, left = 0;
  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);
  return {
    top: top,
    left: left
  };
}
window.onload = function () {
  var stickyHeader = document.getElementById('sticky');
  var headerOffset = findOffset(stickyHeader);
  
  window.onscroll = function() {
    // body.scrollTop is deprecated and no longer available on Firefox
    var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (bodyScrollTop > headerOffset.top) {
      stickyHeader.classList.add('fixed');
    } else {
      stickyHeader.classList.remove('fixed');
    }
  };
};
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers