javascript - 使用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'
        })
    }
});
})

当您滚动时，您可以看到内容部分向下移动(我认为是 40 像素)，我该如何解决这个问题？

Answer 1

因为导航栏最初是相对的，所以它下推了内容部分。当你给它固定位置时，该部分会上升，因为导航栏不再使用页面中的那个空间。

为了解决这个问题，当您给导航栏相对位置时，您可以给该部分一个 40px 的 margin-top，这样 40px 的空间就会被保留。