javascript - 滚动到某个位置后将导航设置为固定

Question

我正在使用基于 Flexbox 的 CSS 框架设计着陆页 - Bulma .

我在全高部分下面创建了一个导航栏，我用它来滚动浏览各个部分，这取决于页面是否滚动到全高部分。 这是我用来添加/删除固定位置类的 JQuery 代码:

$(window).scroll(function () {
    if ($(window).scrollTop() > $('#cover').height()) {
        $('#navbar-sticky').addClass('is-fixed');
    }
    if ($(window).scrollTop() < $('#cover').height()) {
        $('#navbar-sticky').removeClass('is-fixed');
    }
});

我面临的问题是，当导航栏设置为 position: relative - 默认位置时，当单击指向某个部分的任何链接时，它会使用导航的高度“过度滚动”栏。

另一个问题是，当导航到第一部分时 - 在切换类的地方，还有一个过度滚动，我相信使用 if ($(window).scrollTop() >= $('#cover') .height())(大于或等于)解决了这个问题。

这是描述我的问题的相关代码笔 https://codepen.io/miraris/full/wrLdwN 我也在使用 smooth-scroll library在那个代码笔中，但这无关紧要，当它被删除时问题是一样的(只是没有偏移)。

Answer 1

当元素的位置更改为 Fixed 时，等于其高度的部分从 DOM 中释放出来，其下方的元素向上移动。

我们可以有一个包装器来填充由固定的导航栏创建的空间。

HTML

<div class="navbar-space-fill hidden"></div>
<div id="navbar-sticky">
.... your HTML ....
</div>

Javascript

在页面加载时-

$('.navbar-space-fill').css({'height':$('#navbar-sticky').height()});

当导航栏的位置固定时 -

$('.navbar-space-fill').removeClass('hidden');

否则-

$(".navbar-space-fill").addClass("hidden");