Bootstrap ScrollSpy не работает

Тестирование кода Bootstrap и не может заставить функцию Scrollspy работать.Bootstrap ScrollSpy не работает

Вот мой код:

.box { 
 
    border:1px solid grey; 
 
    background-color:#d3d3d3; 
 
} 
 
.large { 
 
    font-size:3000%; 
 
    color:red; 
 
} 
 

 
#div1 { background-color: blue; } 
 
#div2 { background-color: red; } 
 
#div3 { background-color: green;} 
 

 
.contentDiv { 
 
    height:800px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<body data-spy="scroll" data-target=".collapse"> 
 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <a href="" class="navbar-brand">My Website</a> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#div1">Page 1</a></li> 
 
      <li><a href="#div2">Page 2</a></li> 
 
      <li><a href="#div3">Page 3</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <hr> 
 

 
    <h1>Hello, world!</h1> 
 

 
    <div class="container"> 
 
    <div id="div1" class="contentDiv">Content1</div><hr> 
 
    <div id="div2" class="contentDiv">Content2</div><hr> 
 
    <div id="div3" class="contentDiv">Content3</div><hr> 
 
    </div> 
 

 
</body>

Две проблемы я сталкиваюсь:

"Page 3" подсвечивается, когда первой загрузке страницы, но «Page 1 "должно быть
ScrollSpy не работает, когда я просматриваю страницу.

Однако, похоже, это работает на jsFiddle.

источник

2015-05-23 Evgeni Averkin

Вы должны установить position из body (или элемент, по которому вы следите), как relative. Добавьте следующее правило CSS

body 
{ 
    position: relative; 
}

Согласно documentation, это необходимо.

<!DOCTYPE html> 
<html> 
    <head> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <style type='text/css'> 
     body {position:relative;} 
     .box {border:1px solid grey;background-color:#d3d3d3;} 
     .large {font-size:3000%;color:red;} 
     #div1 {background-color:blue;} 
     #div2 {background-color:red;} 
     #div3 {background-color:green;} 
     .contentDiv {height:800px;} 
    </style> 
</head> 
<body data-spy="scroll" data-target=".collapse"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> <a href="" class="navbar-brand">My Website</a> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#div1">Page 1</a></li> 
        <li><a href="#div2">Page 2</a></li> 
        <li><a href="#div3">Page 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <hr> 

    <h1>Hello, world!</h1> 

    <div class="container"> 
     <div id="div1" class="contentDiv">Content1</div> 
     <hr> 
     <div id="div2" class="contentDiv">Content2</div> 
     <hr> 
     <div id="div3" class="contentDiv">Content3</div> 
     <hr> 
    </div> 
</body> 
</html>

скрипку here

источник

2015-05-23 21:57:02 zkanoca

Спасибо zkanoca! Простое решение большой проблемы. –

Bootstrap ScrollSpy не работает

ответ

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