使用位置固定修复标题会导致内容在滚动期间跳转到标题下方答案

【问题标题】：Fixing header using position fixed causes content to jump underneath header during scroll使用位置固定修复标题会导致内容在滚动期间跳转到标题下方
【发布时间】：2015-02-15 21:28:31
【问题描述】：

我正在使用Twitter Bootstrap's Affix plugin 在向下滚动 80 像素后将标题固定到顶部。现在这使标题位置固定。一旦页眉位置固定，页面内容就会滑动/跳跃大约 44px，这与固定页眉的高度相同。

为了解决这个问题，我尝试使用 JavaScript 在滚动 80 像素后向内容容器添加一个等于标题高度的 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

【问题讨论】：

position:fixed 将元素从正常流中取出，它不再影响其后的位置。因此，如果您之前的元素处于正常流动状态，现在将其取出，那么其余的内容当然会“跳跃”。解决这个问题的最简单的方法——如果你的标题的高度是已知的——可能是让它以position:absolute开头，因为这也会把它排除在流程之外，这样你就可以从一开始就考虑到这一点并保持通过边距或填充来阻止以下内容。
@CBroe 谢谢。那成功了。将其添加为答案，我会将其标记为已接受。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

position:fixed 将元素从正常流中取出，它不再影响其后的位置。因此，如果您之前的元素处于正常流动状态，现在将其取出，那么其余的内容当然会“跳跃”。

解决这个问题的最简单方法——如果你的标题的高度是已知的——可能是让它以 position:absolute 开头，因为这也会把它排除在流程之外，这样你就可以从开始并通过边距或填充保持以下内容。

【讨论】：