javascript - 修复了导航栏隐藏网页内容的问题

Question

我的固定导航栏有问题，我正在使用 Foundation 5 框架，但这并不重要，因为无论有没有框架我都有同样的问题，我只使用一个文件 HTML 制作一个网站同一文件中的部分，这是我所拥有的以及我希望看到的:

但不幸的是，当我单击“软件”选项时，我得到了这个:

正如您所看到的，网页内容的“软件”一词​​被导航栏隐藏了，只有手动滚动才能看到它。

这是我的 JavaScript 代码:

$(function(){
$('ul li a').on('click',function(e){
    e.preventDefault();
    var strAncla = $(this).attr('href');

    $('body,html').stop(true ,true).animate({
        scrollTop: $(strAncla).offset().top
    }, 500);
});

});

希望您能帮助我，谢谢。

Answer 1

position:fixed 属性从正常流中删除元素。您可能需要做的是告诉它滚动到目标位置，减去导航栏的高度。因此，例如:

$(function(){
    $('ul li a').on('click',function(e){
        e.preventDefault();
        var strAncla = $(this).attr('href');

        $('body,html').stop(true ,true).animate({
            scrollTop: $(strAncla).offset().top - $('#scrollbarSelector').height()
        }, 500);
    });
});