данные-шпионские ссылки не меняются при прокрутке

У меня проблема с данными-шпионами для бутстрапа. Когда страница загружается, активная ссылка - это ссылка из раздела 4, а при прокрутке ссылки не меняются вообще. Вот мой код, что с ним не так? У меня есть css и js для начальной загрузки.данные-шпионские ссылки не меняются при прокрутке

<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

На основании вашего примера недостаточно контента для фактического прокрутки. Также у вас есть два незакрытых тега div внутри вашего navbar, и вам необходимо применить 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

Ну ваш пример работает нормально, но мне интересно, почему когда я скопировал точно такой же код, мой не работают. кажется, загружает bootstrap и jquery, у меня была css настроена так же, как и вы, прежде чем вы дали ответ –

Без какой-либо дополнительной информации я ничего не могу добавить, чтобы помочь вам решить проблему. – vanburen

какая информация вам нужна? –

данные-шпионские ссылки не меняются при прокрутке

ответ

Смежные вопросы