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是相对的，因为它会将其重新插入到文档流中，然后将内容向下推。换句话说，它按照通常的方式布局，然后在此之后应用顶部，左侧等任何位置。

相反，我使用文档加载时最初的位置（80px）使其成为绝对位置。

使用javascript定位元素的麻烦

2 个答案: