Fixed navigation header

by Malin Jayakody

HTML

<p>Test</p>
<p>Test</p>
<div id="header-container">
  <div id="header"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis sodales urna. Sed pulvinar, enim sed vehicula efficitur, arcu nisl vulputate ante, vel hendrerit arcu nisl at felis. Vivamus porttitor dolor sed dolor ornare sodales. Sed non commodo
  velit. Curabitur at blandit mi, eget egestas massa. Curabitur ac nisi aliquam, egestas sapien sit amet, cursus magna. Phasellus at eros ornare neque suscipit facilisis quis in nisl. In mauris sem, imperdiet vitae neque sit amet, efficitur efficitur
  sapien. Sed pharetra est in blandit dapibus. Maecenas nec est mollis, facilisis tellus vel, eleifend orci. Duis auctor enim sed suscipit blandit. Duis commodo eros a mi faucibus, ac sollicitudin erat consectetur. Pellentesque habitant morbi tristique
  senectus et netus et malesuada fames ac turpis egestas. Praesent nec elit convallis, pulvinar arcu vitae, euismod nisi. Aenean nec nisi at erat tempor rhoncus. Suspendisse tempus, odio vitae semper luctus, erat urna interdum dolor, sit amet congue eros
  diam eu neque. Pellentesque condimentum neque mauris, eget facilisis magna pretium nec. Mauris sed lorem dapibus, viverra magna eu, malesuada lectus. Nullam felis enim, vestibulum placerat lectus non, posuere maximus magna. Duis ultrices scelerisque
  convallis. Suspendisse in lacus lacus. Phasellus sodales egestas quam at dignissim. Etiam feugiat eget orci in facilisis. Suspendisse at urna non dolor tincidunt blandit. Etiam lorem nunc, congue et risus eget, posuere porttitor neque. Etiam a laoreet
  lectus. Donec a iaculis nunc. Cras sit amet arcu risus. Vivamus pharetra aliquet faucibus. Sed gravida eros egestas, porttitor enim quis, vestibulum magna. Etiam at est sit amet dolor porta bibendum. Quisque vulputate risus at scelerisque placerat.
  Fusce ultrices molestie turpis, et tempor purus scelerisque id. Phasellus hendrerit laoreet imperdiet. Vestibulum vel ornare erat. Proin...

CSS

#header-container {
  width: 50px;
  height: 50px;
}

#header {
  background-color: red;
  width: 50px;
  height: 50px;
}

JavaScript

jQuery(function($) {
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var header = $('#header');
    var headerContainer = $('#header-container');
    var headerOffsetTop = headerContainer.offset().top;
    var distanceTop = headerOffsetTop - scrollTop;
    if (distanceTop <= 0) {
      header.css({
        'position': 'fixed',
        'top': '0'
      });
    } else {
      header.css({
        'position': '',
        'top': ''
      });
    }
  });
});