滚动到某个位置后将导航设置为固定答案

【问题标题】：Setting nav to fixed after scrolling to a certain position滚动到某个位置后将导航设置为固定
【发布时间】：2017-10-25 15:36:41
【问题描述】：

我正在使用基于 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 我也在那个codepen中使用smooth-scroll library，但这无关紧要，当它被删除时问题是一样的（只是没有偏移）。

【问题讨论】：

标签： javascript jquery css flexbox bulma

【解决方案1】：

当一个元素的位置更改为固定时，与其高度相等的部分会从 DOM 中释放出来，并且其下方的元素会向上移动。

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

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");

【讨论】：

这确实有效，谢谢。您知道我可以阅读有关此主题的任何资源吗？我还没有找到任何关于此的信息。

【解决方案2】：

要将导航保持在窗口顶部，看起来您只需要删除偏移属性即可。

var scroll = new SmoothScroll('a[href*="#"]', {});

【讨论】：

当导航栏位置已经设置为固定时，它确实可以正确滚动，但当它被 @inaitgaJ 描述的那样被更改时却不是。