使用固定位置修复标题会导致内容在滚动过程中跳到标题下方

Question

我使用Twitter Bootstrap的Affix插件向下滚动80像素后将标题修复为顶部。 现在，这将使标题位置固定。 页眉位置固定后，页面内容就会滑动/跳转约44像素，这与固定页眉的高度相同。

为了解决这个问题，我尝试使用JavaScript，在滚动80px之后，它向内容容器中添加一个与标题高度相等的margin-top 。

这是我的JS代码

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height >= 80) {
        $('.content-container').css('margin-top', '44px');
    } else {
        $('.content-container').css('margin-top', '0px');
    }
});

现在，这可以按预期工作，但是只要加载页面，滚动后标题就不会固定在顶部，这给用户带来了麻烦。 仅使用CSS是否可以解决此问题？

您可以在我的网站www.edmhunters.com上看到标题的使用情况

Answer 1

position:fixed将元素从正常流程中移出，它不再影响后续元素的位置。 因此，如果您之前有元素，现在又将其取出，那么其余内容当然会“跳”起来。

解决此问题的最简单方法（如果您知道标头的高度）可能是将其position:absolute开头，因为这也将其排除在流程之外，以便您可以从头开始考虑并保持通过边距或填充填充以下内容。