Bootstrap 4 - Scrollspyが動作しない

私はBS4でScrollspyを使用する方法について文書化しましたが、動作していません。どうすれば解決できますか？Bootstrap 4 - Scrollspyが動作しない

私の体が持っているposistion: relative

これは私のbodyタグ：

<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は動作しません。

navbarはページの上部に貼り付くことさえありません。

出典

2017-03-04 Luuk Wuijster

はあなたが先頭にナビゲーションバーを添付するfixed-topを使用していることを確認し、

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

正しい（あなた#homeのIDにのみ有効です）

と本文タグ：

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

Bootstrap 4 ScrollSpy Demo

出典

2017-03-05 21:53:30 ZimSystem

はい、それが修正されました。私はすでにそれを自分自身に出すが、それは私の問題に対する答えなので、この答えを受け入れるだろう。 –

Bootstrap 4 scrollspy data-foofsetが円滑なスクロールイベントで動作しません。それは正常に機能しますが、解決策は完全ではありません – Rahul

カスタム滑らかなスクロールイベントでは機能しないので、これを下げましたか？この答えは、上記の質問に記載されているように、円滑なスクロールとは関係ありません。 – ZimSystem

コンテンツセクションにはナビゲーション内のアンカーに接続された一意のID（#about）が必要です。

  <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

はい、私は知っています。しかし、navbarは最初の場所で私のページの上部に固執しません。そして、間違った場所を削除しても、どちらもうまくいきませんでした。 –

Bootstrap 4 - Scrollspyが動作しない

答えて

関連する問題