CODEWITHSUNDEEP
jquerytwitter-bootstrapscrollspy
Jsl
Jsl

Reputation: 39

Scrollspy not working with jQuery and Bootstrap

I am trying to do a nice navbar like you could see on the "getstarted" page from Bootstrap.

A lot is working so far, except the scrollspy which would apply the active status on the good element.

I don't know why it's not working and I did fixed an Height:100% on my <body> as advised in other questions.

Here is my HTML: 

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
    $('body').scrollspy({
        target: '.bs-docs-sidebar',
        offset: 40
        });
    </script>

    <title>Manuel Utilisateur </title>
</head>
<body>

<div class="barrehaut">
    <div class="container"> 
    <div class="row text-center" >
        <div class="col-md-4 col-lg-4">
        <img src="images/LogoEpicture.png" alt="logo epicture" > 
        </div>
        <div class="col-md-4 col-lg-4"  >
        <h1>Manuel Utilisateur</h1>
        </div>
        <div class="col-md-4 col-lg-4" >
         <img src="images/logo.jpg" alt="logo">
        </div>
    </div>
    </div>
</div>

<div class="Centre container"> 
    <div class="row">  
        <div class="col-xs-9">
        <h2 id="1">Environnement requis pour accéder au système</h2>
        <h3 id="1.1">Préambule</h3>
    <p>Les acteurs du chantier se connectent au service via Internet  avec un ordinateur raccordé au réseau de l'entreprise ou équipé d'une connexion internet propre.
    Les documents consultés sur le serveur peuvent sur demande être transférés sur l'ordinateur.
    </p>
    <div class="centrage"><img src="images/Archi2.jpg" /></div>
    <h3 id="1.2">Connexion via Internet</h3>
    <p>Pour travailler dans de bonnes conditions, il est conseillé de s'équiper d'un ordinateur disposant d'une configuration minimum décrite ci-après.</p>
    <h3 id="1.2">Configuration Minimale</h3>
    <p><em>Ecran : </em>Affichage 800 par 600 pixels minimum</br>
    <em>Système d'Exploitation : </em>Windows 98 ou supérieur/Mac OS X 10.0 ou supérieur </br>
    <em>Logiciel de navigation (Browser) : </em>
    <ul>
        <li>Internet Explorer 8.0 et supérieurs</li>
        <li>Mozilla Firefox version 1.0 et supérieurs</li>
    </ul> 
    <em>Logiciels bureautiques :</em>
    <ul>
        <li>Traitement de texte compatible avec les formats .rtf et .txt (WORD 97 et supérieurs, OpenOffice, etc.)</li>
        <li>Tableur compatible avec le format .slk (EXCEL 97 et supérieurs, </li>
    </ul>
    <em>Accès au réseau Internet, boite mèl : </em> l'utilisateur devra disposer d'un accès au réseau Internet ainsi que d'une adresse mèl. Cela nécessite le raccordement par réseau à un serveur d'entreprise disposant d'un accès au réseau Internet ou un abonnement auprès d'un fournisseur d'accès Internet. 
    </p>
<h4 id="1.3">Paramétrage du logiciel de navigation</h3>
<h5 id="1.3.1">Acceptation de cookies</h4>

        </div>
        <nav class="col-xs-3 bs-docs-sidebar hidden-print" >
            <div class="fixed">
            <ul class="nav nav-stacked">
                <li class="active"><a href="#1">Environnement requis pour accéder au service</a>
                <ul class="nav nav-stacked">
                <li><a href="#1.1">Préambule</a></li>
                    <li><a href="#1.2">Connexion via internet</a></li>
                    <li><a href="#1.3">Conseils pour l'utilisation du logiciel de navigation</a></li>
                    <li><a href="#1.4">Gestion des documents</a></li>
                </ul>
                    </li>
                <li><a href="#">blablabla</a></li>
                <li><a href="#">blablabla/a></li>
                <li><a href="#">blablabla</a></li>
                <li><a href="#">blablabla</a></li>
                <li ><a href="#">v</a></li>
                <li class="menu"><a href="#">blablabla</a></li>
                <li class="menu"><a href="#">blablabla</a></li>
                <li class="menu"><a href="#">blablabla</a></li>
                <li class="menu"><a href="#">blablabla</a></li>
                <li class="menu"><a href="#">blablabla</a></li>
                <li class="menu"><a href="#">blablabla)</a></li>
                <li class="menu"><a href="#">blablabla</a></li>    
            </ul>
            </div>
        </nav>
    </div> 
</div>

</body>
</html>

Upvotes: 0

Views: 439

Answers (2)

Jsl
Jsl

Reputation: 39

I just found out the problem :

My ID's (1.1, 1.2, etc.) don't work, it works fine with ID without the character .

Sorry for this trivial question.

Upvotes: 1

Victor Manuel Rodriguez
Victor Manuel Rodriguez

Reputation: 21

try with this

 <script type="text/javascript">
   $(function(){
      $('body').scrollspy({
        target: '.bs-docs-sidebar',
         offset: 40
        });
   });
</script>

Upvotes: 0

Related Questions