引导4 - Scrollspy不工作

问题描述：

我按照有关如何在BS4使用Scrollspy的文件，但它不工作，那么我该如何解决呢？引导4 - Scrollspy不工作

我的身体有posistion: relative

这是我的身体标记：

<body data-spy="scroll" data-target=".navbar">

这是导航栏的HTML：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="container"> 

     <a class="navbar-brand" href="/"> 
      <img src="/images/logo_placeholder.jpg" width="90" height="45" class="d-inline-block align-top" alt=""> 
      Jalinen 
     </a> 
     <div class="collapse navbar-collapse" id="navbarNav"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#home">Home </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Nieuws</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Diensten</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Calamiteiten</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Gallerij</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav>

为什么不工作？

注意：

没有什么作品atm。

导航栏甚至没有坚持到页面顶部。

答

确保您使用fixed-top到导航栏附着在上面，

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded"> 
    .. 
</nav>

和身体标记：

<body data-spy="scroll" data-target="#navbar1" data-offset="70">

Bootstrap 4 ScrollSpy Demo

是的，固定它。我已经自己想出了它，但仍然会接受这个答案，因为它是我的问题的答案。 –

自举4 scrollspy数据foofset不具有平滑滚动事件工作。它工作正常，但解决方案不完美。 – Rahul

您低估了这一点，因为它不适用于您的自定义平滑滚动事件？这个答案按照上面的问题描述，与平滑滚动无关。 – ZimSystem

答

您内容区段必须具有唯一的ID（#about），其连接到在导航的锚。（您#home ID才有效）

正确：

  <li class="nav-item active"> 
       <a class="nav-link" href="#home">Home </a> 
      </li>

错误：

  <li class="nav-item"> 
       <a class="nav-link" href="#">Nieuws</a> 
      </li>

是的，我知道。但是导航栏甚至不会站在我的页面顶部。和删除那些错误在哪里后，它没有工作，要么 –

引导4 - Scrollspy不工作

相关推荐