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

Тестирование некоторого кода начальной загрузки и не может заставить функцию 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>

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

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

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

1 2
javascript html css jquery twitter-bootstrap

1 ответ:

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

body
{
    position: relative;
}

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

<!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>

Скрипка здесь

1