javascript - 坚持顶部菜单差距

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