CODEWITHSUNDEEP
javascriptjquerycss
Hail Hydra
Hail Hydra

Reputation: 473

Fixed navbar hides web content and JS is not working

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

enter image description here

and should be like this

enter image description here

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.

Upvotes: 1

Views: 47

Answers (2)

random_user_name
random_user_name

Reputation: 26160

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.

Upvotes: 1

DoubleFelix
DoubleFelix

Reputation: 101

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;
}

Upvotes: 1

Related Questions