Question

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

为了解决这个问题，我尝试使用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，因为这也会将其从流程中取出，这样你就可以考虑到这一点从一开始就通过边距或填充保留以下内容。

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

1 个答案: