Question

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

当滚动时，当我的标题贴在上面时，那个小小的边缘和舞蹈＆＃34;在标题下消失，它不流畅...... 我想我的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

坚持顶级菜单差距

1 个答案: