title: Fixed Header when reach the top, it is Jumping
body: <p>I am using this JavaScript below to make the header turn to Fixed position when it reaches the top of the page so it stay displayed when the user scrolls, everything seems to be working but the header Jumps and it's not smooth at all, what I am missing? Test it live here: <a href="http://loaistudio.com/" rel="nofollow">http://loaistudio.com/</a></p>
  
  <pre><code>   $(function(){
          // Check the initial Poistion of the Sticky Header
          var stickyHeaderTop = $('#headerWrapper').offset().top;
  
          $(window).scroll(function(){
                  if( $(window).scrollTop() &gt; stickyHeaderTop ) {
                          $('#headerWrapper').css({position: 'fixed', top: '0px'});
  
                  } else {
                          $('#headerWrapper').css({position: 'static', top: '0px'});
  
                  }
          });
    });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
  
      &lt;title&gt;Martin Izehi&lt;/title&gt;
      &lt;meta name="description" content=""/&gt;
      &lt;meta name="keywords" content=""&gt;
  
      &lt;meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=0, maximum-scale=10.0, initial-scale=1.0" /&gt;      
  
      &lt;link rel="shortcut icon" href="assets/elements/favicon.ico"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/reset.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/core.css"&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="assets/css/tablets-landscape.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="assets/css/tablets-portrait.css"/&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="assets/css/phone.css"/&gt;             
      &lt;!--Libraries--&gt;
      &lt;script type="text/javascript" src="assets/libraries/jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="wrapper" id="page"&gt;&lt;!--Website Content--&gt;               
          &lt;header&gt;&lt;!--Header--&gt;
          &lt;div id="headerWrapper"&gt;
              &lt;div id="headerContent"&gt;
  
                  &lt;nav&gt;&lt;ul id="mainMenu"&gt;&lt;!--Main Menu--&gt;
                      &lt;li&gt;&lt;a class="active" href="" id="about"&gt;About Martin&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" id="discography"&gt;Discography&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="" id="contact"&gt;Get In Touch&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;/nav&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;   
  
          &lt;div id="secondHeader"&gt;
              &lt;a class="secondHeader-menuButton" href="#"&gt;Menu&lt;/a&gt;
              &lt;p id="logo-smallScreen"&gt;Martin Izehi&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="wrapper"&gt;&lt;!--Page Content--&gt;
              &lt;div id="home-sectionA" class="content"&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
                  &lt;h1&gt;Welcome To The New Website Template&lt;/h1&gt;
                  &lt;h2&gt;Welcome To The New Website Template&lt;/h2&gt;
                  &lt;h3&gt;Welcome To The New Website Template&lt;/h3&gt;
                  &lt;h4&gt;Welcome To The New Website Template&lt;/h4&gt;
                  &lt;p&gt;Welcome To The New Website Template&lt;/p&gt;
                  &lt;p&gt;&lt;strong&gt;Welcome To The New Website Template&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;em&gt;Welcome To The New Website Template&lt;/em&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;small&gt;Welcome To The New Website Template&lt;/small&gt;&lt;/p&gt;
                  &lt;span&gt;Welcome To The New Website Template&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  
      &lt;/div&gt;&lt;!--End Of The Page--&gt;
  
      &lt;footer id="footer"&gt;&lt;!--Footer Section--&gt;
          &lt;div id="footerContent"&gt;
              &lt;p&gt;Copyright ©2013 Website Name. All rights reserved.&lt;/p&gt;&lt;a href="http://www.loaidesign.co.uk" target="_blank"style="padding-top: 10px;"&gt;Website Designed By&lt;img style="display: inline-block; margin: 0 0 2px 5px; vertical-align: middle;" alt="loai design studio responsive website design" src="assets/elements/loaidesignstudio-logo.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;/div&gt;&lt;!--The End Of The Page--&gt;    
      &lt;!--Scripts Links--&gt;
      &lt;script type="text/javascript" src="assets/js/slider.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="assets/js/main.js"&gt;&lt;/script&gt;
      &lt;script src="assets/libraries/modernizr.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p> </p>
  
  <p>CSS: </p>
  
  <pre><code>body {
      background: #000000 url('../elements/background.png') no-repeat center top;
  
      line-height: 125%;
      text-align: center;  
      overflow-x: hidden;
  
      -webkit-text-size-adjust: none;
      -webkit-overflow-scrolling: touch;  
  }
  
  /*Font Face*/
  @font-face { font-family: Candela; src: url('CandelaBook.otf'); } 
  @font-face { font-family: Candela; font-weight: bold; src: url('CandelaBold.otf');}
  /*Fonts*/h1, h2, h3, h4, h5, h6, p, pre, a, ol, li, span, label, blockquote, figcaption, abbr, td, input, textarea {
      font-family: 'Candela', sans-serif; 
      font-size: 1em;
      color: #636363;
  }
  
  h1 {
      color: #636363;
      font-size: 2em;
      line-height: 120%;
      font-weight: bold;
      padding-bottom: 5px;
  }
  
  h2 {
      color: #636363;
      font-size: 2em;
      line-height: 120%;
      font-weight: bold;
      padding-bottom: 5px;
  }
  
  h3 {
      font-size: 1.5em;
      font-weight: bold;
      padding-bottom: 5px;
  }
  
  h4 {
      font-size: 1em;
      font-weight: bold;
      padding-bottom: 5px;
  }
  
  small {
      font-size: 0.813em;
  }
  
  strong {
      font-weight: bold;
  }
  
  em {
      font-style: italic; 
  }
  
  
  /*MAIN/////////////////////////////////////////////////////////////////////*/   
  /*Main Page*/#page {    
      width: 100%;
      padding-top: 600px;
      position: relative; 
      overflow: hidden;
  }
  
  /*Wrappers*/.wrapper { width: 100%; overflow: hidden; }
  
      .wrapper {
          background: url('../elements/texture.png') repeat;
      }
  
  
  /*Content Container*/.content {
      width: 1030px;
      padding: 0 20px;
      margin: auto;   
      overflow: hidden;
      clear: both;
  }
  
  /*HEADER///////////////////////////////////////////////////////////////////*/
  /*Header Wrapper*/#headerWrapper {
      width: 100%;
  }
  
  /*Header Content Container*/#headerContent {
      width: 1030px; height: 80px;
      padding: 10px 20px;
      margin: auto;   
      overflow: hidden;
  }
  
  /*Header Logo*/#headerLogo {
      width: 200px;
      display: inline-block;
  }
  
  /*Main Menu*/#mainMenu {
      display: inline-block;
  }
  
      #mainMenu li {
          float: left;
      }
  
      #mainMenu a {
          color: #9F8558;
  
          padding: 10px 15px;
          margin-left: 5px;
  
          border-radius: 3px;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
  
          -webkit-transition: background 0.1s linear;
          -moz-transition: background 0.1s linear;
          -ms-transition: background 0.1s linear;
          -o-transition: background 0.1s linear;
          transition: background 0.1s linear;
      }
  
      #mainMenu a:hover {
          color: #76141A; 
      }   
  
      #mainMenu a.active {
          color: #EDE3D1;
          background-color: #9F8558;
          cursor: default;
      }
  
  /*Tablet &amp; Phone Header (Hidden From Widescreen's)*/
  .secondHeader-menuButton, #secondHeader, #logo-smallScreen {
      display: none;
  }
  
  
  
  /*FOOTER////////////////////////////////////////////////////////////////////*/  
  /*Footer Section*/
  #footer {
      text-align: center;  
      width: 100%;
  }
  
  #footerContent {
      width: 1030px;
      padding: 20px;
      margin: auto;   
  }
  
      #footerContent * {
          color: #FFFFFF;
          font-size: 13px;
      }
  
  
  
  /*PAGES////////////////////////////////////////////////////////////////////*/   
  /*Page Name*/   
  </code></pre>