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

问题描述 投票:0回答:1

我正在使用一些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")});

谢谢

jquery twitter-bootstrap
1个回答
0
投票

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

$(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()})}),
© www.soinside.com 2019 - 2024. All rights reserved.