修复了导航栏隐藏网页内容且JS无法正常工作的问题

Question

This is what happen when I press the button "Contacto"

and should be like this

and now I'm using this javascript code

    $(function(){
    $('a#boton-contacto').on('click',function(e){
        e.preventDefault();
        var strAncla = $(this).attr('href');

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

    });
});

but it made the button stop working, I want to know why, what is wrong?

you can go to my site and try it http://genebi.net I hope you can help me, thanks.

Answer 1

This code from you jQuery:

var strAncla = $(this).attr('href'); is setting strAncla to be " http://genebi.net/#contacto "

And since " http://genebi.net/#contacto " is not a valid selector, there is a javascript error that prevents the code from running.

To solve this, either:

1. Change your url for the element from: <a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>

to <a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>

or:

2: You could use a data attribute in your link:

<a id="boton-contacto" href="http://genebi.net/#contacto" data-element="#contacto">CONTACTO</a>

and alter your jQuery as follows:

var strAncla = $(this).attr('data-element');

And it will work as you desire.

Answer 2

position: fixed; removes it from the normal flow of the document, and means that it doesn't occupy space. You can fix this without Javascript (and it'll be much less janky). It's a little awkward to work around this, but you can do it by having a blank div underneath it to fill up the space. Let's call it "header-spacer".

<div class="header">
  ...
</div>
<div class="header-spacer"></div>

And some CSS:

.header-spacer {
    height: 70px;
}