坚持顶部菜单 Gap

Question

我在我的网站上使用 js（使用 wordpress）在滚动页面时获得顶部菜单。 当滚动我的标题时，它可以工作，但我的#entry 内容中有一个空白。 就像这个例子： http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/

滚动时，当我的标题停留在顶部时，标题下的标题“amine edge and dance”消失了，它不流畅...... 我猜我的 JS 中缺少填充或其他东西，但我找不到原因...

这是我的 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;}

还有我的 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'
            });
        }
    });
});

这里是 jsfiddle :http://jsfiddle.net/2UCH4/

谁能帮我解决这个问题？

非常感谢您的帮助！

Answer 1

由于您使用position:fixed 设置该元素，该元素填充的空间现在可用，并且下一个容器刚刚切换。要解决此问题，您可以使用 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*/
 }
});

检查这个Working Demo