Stickey sub header

Sticky sub header - how to avoid jumps and how to improve the code ?

by Roberto Apasajja

HTML

<div id="header">My floating header</div>
<div id="header_stick">My stick header</div>

<div id="base">
    <h1>My page header</h1>
<p>
Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut ante  diam, eget lobortis felis. Donec ultricies faucibus leo eget  condimentum. Nulla et felis nulla, facilisis tincidunt neque. Aliquam  nisi sapien, gravida nec pellentesque a, aliquet id sem. Ut vitae velit  elit, a tincidunt odio. Maecenas aliquet ultrices velit, id egestas  lectus sollicitudin eget. Nam congue tellus a augue vulputate malesuada.  Suspendisse vitae sodales augue. Vestibulum pretium ullamcorper nibh  sit amet pellentesque. Nam a nisl ac tortor auctor pulvinar a vel nisl.  Fusce eget elementum quam. Ut mauris nisi, pellentesque vitae tempor in,  tempor non metus. Fusce sed enim mi. Nam porttitor varius mauris et  luctus. Maecenas ultrices erat vitae erat sollicitudin quis mattis nunc  euismod. Donec at ligula justo. Aenean egestas, lacus eu lacinia  tincidunt, velit mauris ultrices dolor, nec dictum eros augue tincidunt  dolor. Sed egestas erat in mauris tristique at ultrices orci aliquet.
</p>
<p>
Integer  est elit, scelerisque et iaculis eget, suscipit ac nibh. Maecenas nec  lacus tortor, non fringilla ipsum. Ut interdum mollis mauris, id iaculis  tortor malesuada eget. In molestie neque eu mi eleifend ac eleifend  augue gravida. Pellentesque gravida posuere magna, at viverra enim  euismod sit amet. Maecenas ornare justo at diam volutpat bibendum. Nunc  nisi magna, laoreet vitae convallis quis, varius pharetra quam.  Phasellus volutpat hendrerit est, a posuere neque dapibus vel. Quisque  tempus egestas nisl, at pellentesque ipsum sollicitudin et. Vivamus vel  nisi ac mi commodo vulputate vitae sit amet augue. Vestibulum auctor  ipsum ac enim faucibus ut scelerisque diam venenatis. Praesent  imperdiet, odio non accumsan euismod, lectus quam pellentesque leo, vel  iaculis elit purus nec mauris. Sed quis magna neque, sed convallis  libero....

CSS

#header{
    width: 100%; background-color: red;
    border: 1px solid black;height:40px;}
#header_stick{
    width: 100%; background-color: black;
    border: 1px dotted grey;color:white;}
#header_stick.stick{
    position:fixed;top:0;background-color:rgba(0, 0, 0, 0.6);}
h1{
    font-size: 130%; padding-bottom:1px;}

JavaScript

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');
 })