數據間諜鏈接不會在滾動中更改

我有一個引導數據間諜的問題。當頁面加載時，活動鏈接是第4部分的鏈接，當我滾動時，鏈接根本不會改變。這是我的代碼，它有什麼問題？我確實有css和js作爲bootstrap。數據間諜鏈接不會在滾動中更改

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Website Builder</title> 
     <!-- CSS Styles --> 
     <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"> 
     <link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"> 
     <!-- JavaScript Scripts --> 
     <script type="text/javascript" src="{!! asset('js/jquery-3.1.1.min.js') !!}"></script> 
     <script type="text/javascript" src="{!! asset('js/bootstrap.min.js') !!}"></script> 
     <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script type="text/javascript" src="{!! asset('js/template.js') !!}"></script> 
    </head> 

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

    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
       <a class="navbar-brand" href="{{url('template')}}">WebsiteBuilder</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
       </nav> 

<div id="section1" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div>

來源

2016-12-16 Przemek Wojtas

根據您的示例，沒有足夠的內容實際滾動瀏覽。您的navbar內還有兩個未封閉的div標籤，您還需要將position: relative應用於body。

嘗試在自己的部分添加一些高度以查看自己。

工作實例：

body { 
 
    position: relative; 
 
} 
 
section { 
 
    padding: 50px; 
 
    height: 500px; 
 
} 
 
#section1 { 
 
    background: #ffebee; 
 
} 
 
#section2 { 
 
    background: #f44336; 
 
} 
 
#section3 { 
 
    background: #d32f2f; 
 
} 
 
#section41 { 
 
    background: #b71c1c; 
 
} 
 
#section42 { 
 
    background: #ff1744; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

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

 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">WebsiteBuilder</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#section1">Section 1</a> 
 
      </li> 
 
      <li><a href="#section2">Section 2</a> 
 
      </li> 
 
      <li><a href="#section3">Section 3</a> 
 
      </li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#section41">Section 4-1</a> 
 
       </li> 
 
       <li><a href="#section42">Section 4-2</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </nav> 
 

 
    <section id="section1"> 
 
    <h1>Section 1</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section2"> 
 
    <h1>Section 2</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section3"> 
 
    <h1>Section 3</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section41"> 
 
    <h1>Section 4 Submenu 1</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 
    <section id="section42"> 
 
    <h1>Section 4 Submenu 2</h1> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
 
    </section> 
 

 

 

 
</body> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-12-16 17:15:17 vanburen

嗯，你的例子能正常工作，但我不知道爲什麼，當我複製完全相同的代碼，我的不工作。它似乎加載引導程序和jQuery，我已經在你給出答案之前以同樣的方式設置了css –

沒有任何額外的信息，我無法添加任何東西來幫助你解決問題。 – vanburen

你需要什麼樣的信息？ –

數據間諜鏈接不會在滾動中更改

回答

相關問題