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>

兩個問題：

「第3頁」第一次加載頁面時被選中，但「第1頁「應該是
當我滾動頁面時，ScrollSpy不起作用。

但是，它似乎工作在jsFiddle上。

來源

2015-05-23 Evgeni Averkin

您應該將body（或您要監視的元素）的position設置爲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無法正常工作

回答

相關問題