html - 使用固定导航栏时更正页面导航位置

Question

我在 bootstrap 4 中使用固定导航栏。当使用 fixed-top 导航栏时，它下面的内容被导航栏隐藏，因为它的位置是固定的。我必须在正文上添加 padding-top: 65px;，以使内容显示在导航栏下方。

我有内部链接，因此单击导航栏 anchor 可将页面定位到与其相关的部分。但是，因为我使用了 padding-top 技巧，所以位置在该部分顶部下方 65px 处。有没有办法解决，让位置回到版 block 顶部？

Answer 1

你不应该从第一个“固定导航”类添加。你可以在 jquery 的滚动事件中添加它。

$(window).on('scroll', function () {

var scrollTop = 20;
    if ($(window).scrollTop() >= scrollTop) {
        $('nav').addClass("fixed-nav");

    }
    if ($(window).scrollTop() < scrollTop) {
        $('nav').removeClass('fixed-nav');

    }
});

这会在用户向下滚动您的网站时添加固定导航。