jQuery scrollTop 在移动设备上滚动折叠的导航栏

Question

我正在使用 jQuery 来实现滚动效果（单击导航栏项目以滚动到页面的一部分）。

$(document).ready(function(){
 $(".js-scroll-trigger").on('click', function(event) {
   if (this.hash !== "") {
     event.preventDefault();
     var hash = this.hash;   
     $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 500, function(){
       window.location.hash = hash;
     });
   } // End if
 });
});

在台式机上运行良好，但我遇到了一个让我望而却步的错误。在移动设备中，折叠的导航栏也会使用滚动效果，但是单击某些导航栏元素（后者）时会将用户带到该部分，但也会导致实际折叠的导航栏也滚动，基本上隐藏了导航栏折叠顶部的按钮...

我也在使用 Bootstrap 5、Headroom.js 和 Neumorphism UI 库。

编辑：更多示例。这是导航栏中的一些 HTML：

  <header class="header-global">
    <nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-light navbar-transparent navbar-theme-primary fixed-top">
      <div class="container position-relative">
        <a class="navbar-brand  py-4 px-4  mr-lg-4" href="./index.php">        
          </a>
        <div class="navbar-collapse collapse" id="navbar_global">
          <div class="navbar-collapse-header">
            <div class="row">
              <div class="col-6 collapse-brand">
                <a href="./index.php" class="navbar-brand shadow-soft py-2 px-3 rounded border border-light">
                  
                </a>
              </div>
              <div class="col-6 collapse-close">
                <a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
              </div>
            </div>
          </div>
          <div class="nav-wrapper position-relative">
            <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#about">About us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#work">Our work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#pricing">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#contact">Contact us</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="d-flex align-items-center">
          <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </nav>
  </header>

这是一些 neumorphism.js 代码：

"use strict";
$(document).ready(function () {

    // options

    var breakpoints = {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140
    };

    var $navbarCollapse = $('.navbar-main .collapse');

    // Collapse navigation
    $navbarCollapse.on('hide.bs.collapse', function () {
        var $this = $(this);
        $this.addClass('collapsing-out');
        $('html, body').css('overflow', 'initial');
    });

    $navbarCollapse.on('hidden.bs.collapse', function () {
        var $this = $(this);
        $this.removeClass('collapsing-out');
    });

    $navbarCollapse.on('shown.bs.collapse', function () {
        $('html, body').css('overflow', 'hidden');
    });

    $('.navbar-main .dropdown').on('hide.bs.dropdown', function () {
        var $this = $(this).find('.dropdown-menu');

        $this.addClass('close');

        setTimeout(function () {
            $this.removeClass('close');
        }, 200);

    });

    $(document).on('click', '.mega-dropdown', function (e) {
        e.stopPropagation();
    });

    $(document).on('click', '.navbar-nav > .dropdown', function (e) {
        e.stopPropagation();
    });

    $('.dropdown-submenu > .dropdown-toggle').click(function (e) {
        e.preventDefault();
        $(this).parent('.dropdown-submenu').toggleClass('show');
    });

    // Headroom - show/hide navbar on scroll
    if ($('.headroom')[0]) {
        var headroom = new Headroom(document.querySelector("#navbar-main"), {
            offset: 0,
            tolerance: {
                up: 0,
                down: 0
            },
        });
        headroom.init();
    }

更新 - 解决了！ 对于可能面临此问题的其他任何人，对我有用的事情是调整 neumorphism.js 中的溢出 - 从“隐藏”和“初始”，我将其设置为“滚动”。 此外，如果您希望在移动设备中单击链接后关闭导航栏，请添加以下内容（在 stackoverflow --> How to hide collapsible Bootstrap navbar on click 上找到）：

// collapse navbar on mobile after link is clicked
      $('.nav-link').on('click',function() {
    $('.navbar-collapse').collapse('hide');
  });

$navbarCollapse.on('hide.bs.collapse', function () {
        var $this = $(this);
        $this.addClass('collapsing-out');
        $('html, body').css('overflow', 'scroll');
    });

    $navbarCollapse.on('hidden.bs.collapse', function () {
        var $this = $(this);
        $this.removeClass('collapsing-out');
    });

    $navbarCollapse.on('shown.bs.collapse', function () {
        $('html, body').css('overflow', 'scroll');
    });