Question

我正在使用一些jQuery代码使用按钮进行平滑的动画页面滚动，但是这一行代码打破了我的引导导航栏，这样当我单击折叠时它不会折叠并且当我单击时折叠在嵌入式下拉切换按钮上。使用bootstrap.min.css和bootstrap.min.js与此导航栏：

<div class="navbar-wrapper appnavbar navbar navbar-custom navbar-fixed-top" id="mainNav"> 
      <div class="container-fullwidth">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container-fluid">
            <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>
              <a class="active" [routerLink]="['/']" class="navbar-left pull-left"><img class="img-responsive" src="assets/img/pup1.png" style="position: relative; left:2px; max-width:auto; height:50px; margin-left:-7px;"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <!--<li role="separator" class="divider"></li>-->
                <li class="active"><a [routerLink]="['/']" class="active" routerLinkActive="active">#pup</a></li>
                <li class="active"><a [routerLink]="['/howitworks']" class="active" routerLinkActive="active">how it works </a></li> <!-- about -->
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">events <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a [routerLink]="['/']" class="active" routerLinkActive="active">Featured</a></li>

所有这些jQuery都需要使平滑的滚动按钮工作，第一行是破坏我的导航栏的jQuery行：

function collapseNavbar(){$(".navbar").offset().top>50?$(".navbar-fixed-top").addClass("top-nav-collapse"):$(".navbar-fixed-top").removeClass("top-nav-collapse")}

这是jQuery的其余部分：

$(window).scroll(collapseNavbar),$(document).ready(collapseNavbar),

$(function(){$("a.page-scroll").bind("click",function(e){var t=$(this);$("html, body").stop().animate({scrollTop:$(t.attr("href")).offset().top},1500,"easeInOutExpo"),e.preventDefault()})}),

$(".navbar-collapse ul li a").click(function(){$(this).closest(".collapse").collapse("toggle")});

由于

Answer 1

以下运气如何？我的猜测是滚动到拦截下拉单击，或者它正在工作，但由于固定的导航栏，它位于注入点，这可能超出视口。

＆＃13;

$(function(){$("a.page-scroll:not(.dropdown-toggle)").bind("click",function(e){var t=$(this);$("html, body").stop().animate({scrollTop:$(t.attr("href")).offset().top},1500,"easeInOutExpo"),e.preventDefault()})}),

＆＃13;

jQuery平滑滚动以某种方式破坏引导导航栏

1 个答案: