Fix header

by beliyadm

HTML

<div id="sp-header">
menu
</div>
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

#sp-header {border: 2px solid #000;
background: #e1e1e1;
padding: 15px;
-webkit-transition: all 1000ms ease-in-out 0s;-moz-transition: all 1000ms ease-in-out 0s;-o-transition: all 1000ms ease-in-out 0s;
}
#sp-header.fixheader {position: fixed; top: 0; left: 0; width: 100%;}

JavaScript

// фиксация при прокрутке больше 100 пкс
$(window).scroll(function()
  {
      if( $(window).scrollTop() > 100 )
      {
          $('#sp-header').addClass('fixheader');
      }
      else
      {
          $('#sp-header').removeClass('fixheader');
      }
  });
  // если при загрузке страницы уже находимся не в шапке (по ф5)
  if ($(window).scrollTop() > 100) {
    $('#sp-header').addClass('fixheader');
  }