怎麼了我的引導scrollspy？

我只想嘗試Bootstrap Navbar的滾動條，但它不起作用。無論我點擊哪個菜單，<li><a href="section4"></li>項目始終處於活動狀態。如果我在底部的主體和腳本中刪除了date-spy =「scroll」data-target =「＃myNavbar」，那麼li活動就很好。怎麼了我的引導scrollspy？

<head><meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">--> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 


    <script src="js/jquery-1.12.3.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/script.js?rand=<?php echo rand(); ?>"></script> 
</head> 
<body data-spy="scroll" data-target="#myNavbar"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" 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="#">TEST</a> 
      </div> 
      <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><a href="#section4">Section 4</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </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="section4" class="container-fluid"> 
     <h1>Section 4</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> 

    <script> 
     $('body').scrollspy({ 
      target: '#myNavbar', 
      offset: 50 
     }); 
    </script> 
</body>

來源

2016-04-28 Virgil

我不知道爲什麼，html文件需要添加<!DOCTYPE html>在文件頂部。和Scrollspy的作品。

來源

2016-04-29 02:51:30 Virgil

指定該文件爲HTML5 - 因此能夠呈現引導程序功能 – gavgrif

你需要用jQuery的文檔準備包裝

$(document).ready(function(){ 
     $('body').scrollspy({ 
      target: '#myNavbar', 
      offset: 50 
     }); 
})

也是我的其他文件，你可能不會在你的CSS在看準了這一點在：

需要相對定位：具有data-spy =「scroll」的元素需要CSS position屬性，值爲「relative」才能正常工作。

來源

2016-04-28 11:15:28 gavgrif

我的css風格的值是「相對」的身體位置。另外，我將jQuery封裝在文檔包裝器中，它仍然不起作用。 – Virgil

怎麼了我的引導scrollspy？

回答

相關問題