固定的导航栏隐藏网页内容

Question

I have a problem with a fixed navbar, I'm using Foundation 5 framework but it doesn't matter, because I have the same problem with or without the framework, I'm making a website only using one file HTML all sections in the same file, this is what I have and what I would like to see:

But unfortunately I got this when I clicked the option "Software":

As you can see the word "software" of the web content is hide by the navbar, I can see it only if I do scrolling manually.

This is my javascript code:

$(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);
});

});

I hope you can help me, thanks.

Answer 1

The position: fixed attribute removes an element from the normal flow. What you probably need to do is tell it to scroll to the target position, minus the height of the navbar . So, for example:

$(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);
    });
});