用JavaScript定位元素时遇到问题

Question

我正在尝试实现一个导航栏，该导航栏在用户滚动到它时被“捕获”。 我正在实现目标，但通过当前的尝试，这也在移动我滚动的主要内容，而这并不是我想要实现的。 这是我的https://jsfiddle.net/abp1rwhp/

$(function(){
var navHeight = $('#nav-bar').offset().top;
console.log(navHeight)
$(window).on('scroll', function() {
    if(screen.width < 980) {
    }
    if($(window).scrollTop() > navHeight){
        $('#nav-bar').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '0px',
            'position': 'fixed'
        })
    }
    if($(window).scrollTop() < navHeight){
        $('#nav-bar').css({
            'top': '',
            'position': 'relative'
        })
    }
});
})

如您所见，滚动时内容部分向下移动（我认为40px），我该如何解决该问题？

Answer 1

由于导航栏最初是相对的，因此它会向下推动内容部分。 当您将其位置固定时，该部分会上升，因为导航栏不再使用页面中的该空间。

为了解决这个问题，当您将导航栏的位置设为相对位置时，可以为该部分的上边距设置为40px，以便保留40px的空间。

Answer 2

我可以通过在两个if语句中重写CSS来解决您的问题，如下所示：

    if ($(window).scrollTop() > navHeight) {
        $('#nav-bar').css({
            'top': '0px',
            'position': 'fixed'
        });
    }

    if ($(window).scrollTop() < navHeight) {
        $('#nav-bar').css({
            'top': '80px',
            'position': 'absolute'
        });
    }

您不希望#nav-bar是相对的，因为那样会将其重新插入到文档流中，从而将内容压低。 换句话说，它按照通常的方式进行布局，然后在此之后从顶部，左侧等位置应用任何定位。

取而代之的是，我将文档加载时的顶部位置（80像素）设为绝对位置。