导航栏状态 - 手动从正常状态更改为折叠状态

Question

我有以下导航栏：

  <nav class="navbar fixed-top navbar-expand-sm navbar-light">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto ">
          <li class="nav-item">
            <a class="nav-link link-light active" href="#a">A</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#b">B</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#c">C</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

我想做的是，如果显示分辨率足够大以使其显示为未折叠，那么如果用户的滚动条 Y 不在顶部，导航栏将显示为折叠（否不管显示大小），这就是我正在尝试使用 js 的方法，但它不起作用，而且我没有成功找到有关如何控制实际导航栏状态的有用信息（collapsed\not 折叠）...感谢任何帮助。

let navcollapse = document.getElementById('navbarSupportedContent')
window.addEventListener('scroll', (e) => {
    if(window.scrollY == 0) { // top position
      // open the navbar
    } else {
       navcollapse.collapse = 'hide'; // collapse it
    }
});

-如果显示很小，默认情况下会折叠，则无论滚动 Y 是否在顶部，导航栏都不会发生任何变化，并且导航栏将保持折叠状态。

Answer 1

就在想到更改 Sass 文件 grid-breakpoints 的想法时，我偶然发现了一个我不熟悉的 bootstrap 断点...... 'XS'，这将在大屏幕上折叠导航栏，因为它会为大于或等于 576px 的尺寸执行此操作（而 'SM' 断点对小于 576px 的尺寸有效，因此如果屏幕很小够了，导航栏将按要求保持折叠状态。
无论如何，这是折叠导航栏的代码（在 html 文件中为导航元素添加了一个 ID，js 代码）：
JS代码：

window.addEventListener('scroll', function() {
  if (window.scrollY == 0) { // top position - expand navbar
    document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-xs');
    document.getElementById('navbarscroll-spy').classList.add('navbar-expand-sm');
  } else { // scrolled - collapse navbar
    document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-sm');
    document.getElementById('navbarscroll-spy').classList.add('navbar-expand-xs');
  }
}

html:

  <nav id="navbarscroll-spy" class="navbar fixed-top navbar-expand-sm navbar-light">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto ">
          <li class="nav-item">
            <a class="nav-link link-light active" href="#a">A</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#b">B</a>
          </li>
          <li class="nav-item">
            <a class="nav-link link-light" href="#c">C</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

导航栏状态 - 手动从正常状态更改为折叠状态

Navbar state - manually change from normal state to collapsed state

html

javascript

collapse

navbar

bootstrap-5