引導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。

導航欄甚至沒有堅持到頁面頂部。

來源

2017-03-04 Luuk Wuijster

確保您使用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

來源

2017-03-05 21:53:30 ZimSystem

是的，固定它。我已經自己想出了它，但仍然會接受這個答案，因爲它是我的問題的答案。 –

自舉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>

來源

2017-03-04 21:41:46

是的，我知道。但是導航欄甚至不會站在我的頁面頂部。和刪除那些錯誤在哪裏後，它沒有工作，要麼 –

引導4 - Scrollspy不工作

回答

相關問題