固定导航栏隐藏了Web内容，JS无法正常工作

Question

当我按下按钮＆＃34; Contacto＆＃34;

时会发生这种情况

应该是这样的

现在我正在使用此javascript代码

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

    });
});

但它让按钮停止工作，我想知道为什么，出了什么问题？

你可以去我的网站试试http://genebi.net我希望你能帮助我，谢谢。

Answer 1

你的代码来自jQuery：

>>将var strAncla = $(this).attr('href');设为＆＃34; http://genebi.net/#contacto＆＃34;

自＆＃34; http://genebi.net/#contacto＆＃34;不是有效的选择器，有一个javascript错误阻止代码运行。

要解决此问题，请：

1. 更改元素的网址： strAncla

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

或：

2：您可以在链接中使用数据属性：

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

并按如下方式更改您的jQuery：

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

它会按你的意愿运作。

Answer 2

position: fixed;将其从文档的正常流中删除，并表示它不占用空间。你可以在没有Javascript的情况下解决这个问题（并且它会变得不那么笨拙）。解决这个问题有点尴尬，但你可以通过在它下方留一个空白div来填补空间。我们称之为“header-spacer”。

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

还有一些CSS：

.header-spacer {
    height: 70px;
}