固定导航栏隐藏了Web内容

Question

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

但不幸的是，当我点击选项＆＃34;软件＆＃34;：

时，我得到了这个

正如你可以看到＆＃34;软件＆＃34;通过导航栏隐藏Web内容，只有手动滚动才能看到它。

这是我的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);
    });
});