stick to top menu Gap

Question

I'm using a js on my website (with wordpress) to get a stick to top menu when scrolling my page. it works, when scrolling my header sticks on top, but there's a gap in my #entry content. like on this example : http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/

when scrolling and when my header sticks to top, the tittle "amine edge and dance" dissapears under the header, it is not fluid... I guess there's a padding missing or something in my JS but I can't find why...

here is my css :

#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}

and my JS :

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
            $('#stickyalias').css('display', 'block');
        }else{
            $('#stickyheader').css({
                position: 'relative'
            });
        }
    });
});

here is jsfiddle :http://jsfiddle.net/2UCH4/

can anybody help me with this ?

thanks a lot for your help !

Answer 1

Since you are setting that element with position:fixed the space that was fill by the element is now available and the next container just switch up. To fix that you can correct the space with margin-top:

$(window).scroll(function () {
  if ($(window).scrollTop() > stickyHeaderTop) {
     $('#stickyheader').css({
         position: 'fixed',
         top: '0px'
     });
     $('#stickyalias').css('display', 'block');
         var mT = $('#stickyheader').css('height'); /*Add this*/
         $('#stickyheader').next('.post').css('marginTop', mT); /*Add this*/
  }else{
     $('#stickyheader').css({
         position: 'relative'
     });
     $('#stickyheader').next('.post').css('marginTop', '0'); /*Add this*/
 }
});

Check this Working Demo