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

Posted 2023-05-08

【中文标题】jQuery平滑滚动以某种方式破坏引导导航栏

【英文标题】：jQuery smooth scroll somehow breaking bootstrap navbar

【发布时间】：2017-06-26 05:21:23

【问题描述】：

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

谢谢

【问题讨论】：

你可以为它创建codepen吗？

您有正在使用的代码的链接吗？我在平滑滚动和 Bootstrap 组件方面遇到了类似的问题。

【参考方案1】：

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

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