Was ist los mit meinem Bootstrap scrollspy?

Ich möchte nur Bootstrap Navbar Scrollspy versuchen, aber es funktioniert nicht. Und unabhängig davon, auf welches Menü ich klicke, ist das Element <li><a href="section4"></li> immer aktiv. Wenn ich date-spy = "scroll" data-target = "# myNavbar" in body und script auf der Unterseite lösche, ist li active in Ordnung.Was ist los mit meinem Bootstrap 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>

Quelle

2016-04-28 Virgil

Ich weiß nicht, warum, HTML-Datei muss <!DOCTYPE html> auf die Datei oben hinzufügen. Und scrollspy arbeitet.

Quelle

2016-04-29 02:51:30 Virgil

bezeichnet die Datei als HTML5 - daher kann sie die Bootstrap-Funktion rendern – gavgrif

müssen Sie die jQuery im Dokument bereit Wrapper

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

auch das ich in anderen Unterlagen gesichtet wickeln, die Sie nicht in Ihrem CSS haben könnten:

Benötigt relative Positionierung : Das Element mit data-spy = "scroll" benötigt die Eigenschaft CSS position mit dem Wert "relative" um korrekt zu funktionieren.

Quelle

2016-04-28 11:15:28 gavgrif

Ich habe CSS-Stil mit einem Wert von "relative" Körperposition. Auch wickle ich die jQuery in den Dokument bereit Wrapper, es funktioniert immer noch nicht. – Virgil

Was ist los mit meinem Bootstrap scrollspy?

Antwort

Verwandte Themen