怎么了我的引导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>

答

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

指定该文件为HTML5 - 因此能够呈现引导程序功能 – gavgrif

答

你需要用jQuery的文档准备包装

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

也是我的其他文件，你可能不会在你的CSS在看准了这一点在：

需要相对定位：具有data-spy =“scroll”的元素需要CSS position属性，值为“relative”才能正常工作。

我的css风格的值是“相对”的身体位置。另外，我将jQuery封装在文档包装器中，它仍然不起作用。 – Virgil

怎么了我的引导scrollspy？

相关推荐