2017-02-08 5 views
0

ボタンを使用してスムーズなアニメーションページスクロールを行うためにjQueryコードを使用していますが、この1行のコードは折りたたみをクリックすると折りたたまれないようにブートストラップナビゲーションバーを破っています埋め込みのドロップダウントグルボタンをクリックすると折りたたまれていますこのナビゲーションバーでbootstrap.min.cssとbootstrap.min.jsの使用:jQueryスムーススクロール何とかブレイブブートストラップnavbar

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

おかげ

+0

あなたは同じのためcodepenを作成できますか? –

+0

使用しているコードとリンクしていますか?スムーズなスクロールとブートストラップコンポーネントにも同様の問題がありました。 – Liam

答えて

0

どれ運eに続く?私の推測では、スクロールは、ドロップダウンのクリックを傍受しているか、動作していますが、固定されたナビゲーションバーのため、ビューポイントを超えている可能性が高い注入ポイントに配置されています。

$(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()})}),