1

我有一个带导航的标题：

<header>
    <div class="container-fluid">
       <div class="row">
            <div class="col-md-8">
               <div class="siga">
                   <img src="images/logo2.png" alt="">
               </div>
            </div>
            <div class="col-md-4">
               <div class="siga">
                   <h1>Documentação de Componentes</h1>
               </div>
            </div>                
       </div>
        <div class="row">
                <!-- Fixed navbar -->
                <nav class="navbar navbar-default">
                   <div class="logo-min">
                       <img src="images/logo_min.png" alt="">
                   </div>
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                         <li><a href="#painelPadrao">Painel Padrão</a></li>
                         <li><a href="#painelAbas">Painel com Abas</a></li>
                         <li><a href="#botoes">Tipos de Botões</a></li>
                         <li><a href="#listagemDados">Listagem de Dados</a></li>
                         <li><a href="#multiSelecao">Multiseleção</a></li>
                         <li><a href="#pesquisa">Painel de pesquisa</a></li>
                      </ul>

                      <div class="scroll-hint">&nbsp;</div>

                    </div><!--/.nav-collapse -->
                </nav>
        </div><!--/.row -->

    </div>
</header>

而且我有一个 jQuery 函数可以在 srcolling 时将其固定在顶部：

$(window).bind('scroll', function() {
                var headerHeight = $('header .container-fluid .row:first-child').outerHeight(); // custom header height
                ($(window).scrollTop() > headerHeight) ? $('header').addClass('goToTop') : $('header').removeClass('goToTop');
            });

我希望当点击导航菜单项时，页面平滑滚动到引用的锚点，如Bootstrap 组件页面，为此我也有这个功能：

$('.nav a').bind('click', function(){
    var anchor = $(this);
    var navHeight = $('header').outerHeight(); // custom header height

    $('body,html').animate({scrollTop: $(anchor.attr('href')).offset().top - navHeight - 20 ,}, 700);
    event.preventDefault();
});

但是，看起来函数的 -navHeight - 20 部分只是在第一次点击时被忽略。我的意思是，滚动使锚点被固定的导航栏覆盖。从第二次单击菜单项开始，它可以正常工作；

即使在第一次点击时，我怎样才能使它正常工作？

4

0 回答 0