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

Question

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

我在全高部分下面创建了一个导航栏，我用它来滚动浏览各个部分，这 fixed/unfixed 取决于页面是否在全高部分下方滚动 . 这是我用来 add/remove 固定位置 class:

的 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 - 默认位置时，当点击任何 link 到某个部分时，它 "overscrolls" 使用高度导航栏。

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

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

Answer 1

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

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

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

Answer 2

要将导航保持在 window 的顶部，看起来您只需要删除偏移量属性。

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

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

Setting nav to fixed after scrolling to a certain position

javascript

css

jquery

flexbox

bulma