数据间谍链接不会在滚动中更改

我有一个引导数据间谍的问题。当页面加载时，活动链接是第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

你需要什么样的信息？ –

数据间谍链接不会在滚动中更改

回答

相关问题