坚持到顶部菜单

Question

我在网站上使用js（使用wordpress）来滚动页面时获得顶部菜单的提示。 它可以正常工作，当滚动时，我的标题会停留在顶部，但是#entry内容中存在间隙。 像这个例子一样： http : //www.amsbooking.fr/mattieumoreau/artists/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*/
 }
});

检查此工作演示