2017-03-11 19 views
0

私のウェブサイトにscrollspyものを追加しようとしましたが、まだ動作していません。そのセクションにあるときにナビゲーションバーのリンクをハイライトしません。これはscrollspyの機能で、問題を把握できませんでした。私はコードを貼り付けて、どこが間違っているのか理解しやすくします。ScrollSpyが私のウェブサイトで動作していません

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 

    <!-- Navigation --> 
    <nav id="mainNav" class="navbar navbar-fixed-top"> 
     <div class="container"> 
      <a class="navbar-brand page-scroll" href="#page-top" style=" font-family: 'Lobster Two', cursive, serif;font-size:25px">my website</a> 
      <button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i></button> 
      <!-- Navigation Bar List Contents --> 
      <div class="clearfix hidden-md-up"></div> 
      <div class="collapse navbar-toggleable-sm" id="navbarResponsive"> 
       <ul class="nav navbar-nav float-md-right"> 
        <li class="nav-item"> 
         <a class="nav-link page-scroll" href="#about">About Us</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link page-scroll" href="#sample">Sample Article</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link page-scroll" href="#topics">Topics</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link page-scroll" href="#whyus">Why Choose Us</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link page-scroll" href="#contact">Contact</a> 
        </li> 
        <li> 
        <a href="form.php" class="btn btn-md btn-info btn-block" role="button">Order now</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

断面積

<!-- Start About Us Section --> 
     <section id="about"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12 text-xs-center"> 
         <h2 class="section-heading" style="color: black">About Us</h2> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-lg-12"> 
         hello world     
        </div> 
       </div> 
       </div> 
      </section> 
     <!--End About Us--> 

答えて

0

あなたのCSSを示さなかったが、私はあなたがrelativebodypositionを設定していない推測しています。

Bootstrap's documentationから:

どんなに実装方法、scrollspyは position: relativeを使用する必要があります。あなたが監視している要素にほとんどの場合 これは<body>です。 <body>以外の要素をスクロールするときは、必ずheightoverflow-y: scrollを設定してください。適用される。

0

アップデートにあなたの体のタグ:

<body id="page-top" data-spy="scroll" data-target=".navbarResponsive"> 

ブートストラップ.navコンポーネントの親要素を対象としなければならないことであることの理由

CSS:

body { 
    position: relative; 
} 

HTML:

<body data-spy="scroll" data-target="#navbar-example"> 
    ... 
    <div id="navbar-example"> 
    <ul class="nav nav-tabs" role="tablist"> 
     ... 
    </ul> 
    </div> 
    ... 
</body> 

参考:Bootstrap 3 Documentation // Javascript: Scrollspy Usage

関連する問題