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

gpnt7bae 于 2022-11-27 发布在 Java

关注(0)|答案(1)|浏览(164)

我有以下导航栏：

<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，但它不工作，我没有成功地找到一些关于如何控制实际导航栏状态的有用信息（已折叠\未折叠）...感谢您的帮助。

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是否在顶部

JavaScript

来源：https://stackoverflow.com/questions/69515028/navbar-state-manually-change-from-normal-state-to-collapsed-state

1条答案

按热度按时间

ldioqlga1#

就在我想到修改Sass文件grid-breakpoints的时候，我偶然发现了一个我不熟悉的引导程序断点...“XS”，它会在大屏幕上折叠导航栏，因为它会在尺寸大于或等于576px时折叠导航栏（而“SM”断点在小于576px的尺寸上生效，因此如果屏幕足够小，导航栏将根据请求保持折叠）。
无论如何，这是折叠导航栏的代码（在html文件中为nav元素添加了一个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>

赞(0）回复(0）举报 2022-11-27

我来回答

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

1条答案

相关问题

热门标签

最新问答