javascript - Stick header causes page jumps when short page -

my sticky header causes page jump when page isn't long. on pages large amounts of scrolling works fine when small amount jumps point of stick. think gets trapped in between point sticks , transition part.

#header{     width: 100%;      height:100%; }  .headertwo{     width: 100%;      height: 48px !important;     background: url(../images/work/topsky.jpg) no-repeat;     background-size: 100%; }  #header_stick{     width: 100%;     height: 80px;     margin-top: 16px;     font-size: 16px;     background-color: white;     -webkit-transition: .25s ease;     -moz-transition: .25s ease;     -o-transition: .25s ease;     -ms-transition: .25s ease;     transition: .25s ease; }  #header_stick img{     margin-top: 1px;     width: 120px;     -webkit-transition: .25s ease;     -moz-transition: .25s ease;     -o-transition: .25s ease;     -ms-transition: .25s ease;     transition: .25s ease; }  .stick {     position:fixed;     top:0;     height: 51px;     margin-top: 0px;     font-size: 14px;     background-color: white;     opacity:0.9;     z-index: 14;     -webkit-transition: .25s ease;     -moz-transition: .25s ease;     -o-transition: .25s ease;     -ms-transition: .25s ease;     transition: .25s ease; }  .stick img {      width: 100px;     margin-top: 1px;     -webkit-transition: .25s ease;     -moz-transition: .25s ease;     -o-transition: .25s ease;     -ms-transition: .25s ease;     transition: .25s ease; }   $(function() {  jquery(window).scroll(function(){     var top = jquery(window).scrolltop(); if(top>42) // height of float header jquery('#header_stick').addclass('stick'); else  jquery('#header_stick').removeclass('stick');     })  });   <div id="headertwo">     <div id="intro">     </div> </div>  <div id="header_stick">      <div class="nav-container">          <div class="nav-logo feature">              <a href="index.html#anchor" class="transition">             </a>             <div class="nav-logo-img"><img src="images/logo.png">             </div>             <div class="nav-logo-text">             </div>         </div>          <div class="nav-menu">             <div class="nav-link contact"><a href="contact.html" class="transition">contact</a>             </div>             <div class="nav-link about"><a href="about.html" class="active transition">about</a>             </div>             <div class="nav-link work"><a href="index.html#anchor" class="transition">work</a>             </div>             <button id="trigger-overlay" type="button">menu</button>         </div>     </div> </div>     <div class="overlay overlay-hugeinc">         <button type="button" class="overlay-close">close</button>         <nav>             <ul>                 <li><a href="index.html#anchor">work</a></li>                 <li><a href="about.html">about</a></li>                 <li><a href="contact.html">contact</a></li>             </ul>         </nav>     </div>   <div class="width-container">     <div class="line">     </div>      <div class="project contact-padding">         <div class="column-one">             <div class="header-container">                 <div class="header">about                 </div>                 <div class="subtitle">subtitle                 </div>             </div>          </div>         <div class="column-two">                  <div class="about-body-text">lorem ipsum dolor sit amet, consectetur adipiscing elit. duis et fringilla sapien, eget feugiat justo. aenean gravida libero ac dolor sagittis, in eleifend tortor lacinia. quisque @ lectus in ex imperdiet convallis. morbi leo nisi, suscipit eu semper non, mattixs non velit. duis commodo sem nibh, vitae pharetra purus feugiat sit amet. etiam suscipit commodo nibh. suspendisse nisi augue, iaculis rutrum ultricies nec, volutpat quis justo. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. etiam imperdiet non diam sit amet suscipit.                 </div>          </div>      </div>    </div>  <div id="footer">     <div class="footer-half footer-half-first">     </div>     <div class="footer-half footer-half-second">         <div class="footer-contents">         </div>     </div> </div> 

i think css provided might missing something, think understand what's happening. when scroll page passed height of header, set position:fixed. doing this, remove of height of page, means jquery(window).scrolltop() changes (scrolltop lower header height - 42).

this causes flicker between addclass("stick") , removeclass("stick"), causing "jumpy" feeling.

you need add placeholder that's same height header when stick header top. css gave me, height 80px. added padding top of content compensate.

$(function() {      jquery(window).scroll(function(){          var top = jquery(window).scrolltop();           if(top>42) { // height of float header              jquery('#header_stick').addclass('stick');              jquery('.width-container').css("paddingtop", "80px");          } else {              jquery('#header_stick').removeclass('stick');              jquery('.width-container').css("paddingtop", "0px");          }     }); }); 

see example here: http://jsfiddle.net/hzn6map1/