0

I'm designing a landing page using a Flexbox based CSS Framework - Bulma.

I created a navbar below a fullheight section and I'm using it to scroll through sections, which gets fixed/unfixed depending whether the page is scrolled below the fullheight section. This is the JQuery code I'm using to add/remove the fixed position class:

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

The issue I'm facing is that when the navigation bar is set to position: relative - default position, when clicking on any link to a section it "overscrolls" using the height of the navigation bar.

Another issue is that when navigating to the first section - where the class is toggled, there's also an overscroll, I believe using if ($(window).scrollTop() >= $('#cover').height()) (is greater than or equal to) fixes that.

Here's a relevant codepen that describes my issue https://codepen.io/miraris/full/wrLdwN I'm also using a smooth-scroll library in that codepen, but that's irrelevant and the issue is the same when it's removed (just no offset).

4

2 回答 2

2

当元素的位置更改为固定时，与其高度相等的部分会从 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");
于 2017-10-25T15:52:50.600 回答
0

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

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

于 2017-10-25T15:55:16.363 回答