Scrollspy 活动不适用于 Bootsrap 5

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

我需要帮助。我使用了 Bootstrap 示例中的代码,但它不起作用。

我将数据目标放在Javascript上,我还将数据目标放在body上。 该代码是 bootstrap-5 rollspy 的完整副本,但我不完全理解如何使用它。谢谢您的帮助。

 $('body').scrollspy({ target: '#navbar-example2' });
<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading1">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading2">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading3">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading4">My Project</a>
        </li>
      </ul>
    </nav>
    
    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
      <section id="scrollspyHeading1">
      </section>
      <section id="scrollspyHeading2">
      </section>
      <section id="scrollspyHeading3">
      </section>
      <section id="scrollspyHeading4">
      </section>
    </div>
</body>

html bootstrap-5 scrollspy
2个回答
3
投票

Bootstrap 5 文档中所述..

“可滚动容器和键盘访问如果您正在制作 可滚动容器(除 之外),请确保有高度 设置并溢出-y:滚动;..."

例如,

.scrollspy-example {
    position: relative;
    height: 300px;
    overflow: auto;
}

演示


0
投票

尝试将 data-bs-spy="scroll" 更改为 data-spy="scroll"

它对我有用。

© www.soinside.com 2019 - 2024. All rights reserved.