web-dev-qa-db-fra.com

Comment utiliser Bootstrap scroll spy?

Je n'arrive pas à faire fonctionner correctement l'espion de défilement avec une navigation verticale. Vous trouverez ci-dessous le code que j'utilise. Pour une raison quelconque, seul "Two" est activé.

Quelqu'un a une idée de ce qui ne va pas?

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter Bootstrap Scroll Spy Playground</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span3">
            <ul class="navbar nav nav-list affix">
              <li class="active"><a href="#one">One</a></li>
              <li><a href="#two">Two</a></li>
            </ul>
        </div>
        <div class="span1" data-spy="scroll">
            <section id="one">
            <h1>One</h1>
            <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2>
            </section>
            <section id="two">
            <h1>Two</h1>
           <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2>
            </section>   
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
twitter-bootstraptwitter-bootstrap-2
26
user1780429

En triant cela par moi-même, j'ai trouvé que l'élément espionné doit avoir une barre de défilement .

Jetez un oeil à ce violon: http://jsfiddle.net/adamp/qgU6h/1/

Vous pouvez soit espionner directement l'élément body ($('body').scrollspy()), soit donner une hauteur explicite à votre contenu et le forcer à afficher une barre de défilement.

(Si vous regardez le Bootstrap exemple de documentation , il fait l'affaire à hauteur fixe.)

36
adam-p

Merci Jerreck, j'ai pu faire des travaux avec l'aide de

height: 100%;

dans le sélecteur de corps de mon CSS

Aussi recommandé par les gars à Bootstrap http://getbootstrap.com/javascript/#scrollspy

J'ai ajouté position: relative; dans le corps aussi.

Le début du sélecteur de corps dans mon CSS se présente comme suit:

body {
    position: relative;
    height: 100%;
    /* … */
}

Dans le <body> en HTML je devais supprimer

data-offset="0"

il est maintenant comme ça

<body data-spy="scroll" data-target="#navigation">
2
Daniel G Pare

vous pouvez le faire comme http://jsfiddle.net/mCxqY/

<body data-spy="scroll" data-target="#navbar">
    <div id="post1" class="box">
        <h1>Post 1</h1>
        <p> Scroll Down↓</p>
    </div>
    <div id="post2" class="box"><h1>Post 2</h1></div>
    <div id="post3" class="box"><h1>Post 3</h1></div>

    <div id="navbar">
        <ul class="nav">
            <li><a href="#post1">Post 1</a></li>
            <li><a href="#post2">Post 2</a></li>
            <li><a href="#post3">Post 3</a></li>
        </ul>
    </div>

    <script src="http://Twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
</body>​

css

@import url(http://Twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box{
    margin: 20px; padding: 15px;
    background: #eee;
    height: 500px;
}
#navbar{
    position: fixed;
    bottom: 0; left: 20px;
    width: 100%;
    background: #fff;
}
.nav li a{
    float: left;
    width: 80px;
    padding: 15px 0;
}
.nav li a:hover{
    color: #f33 !important;
    background: none;
}
.nav li.active a{
    color: #f55;
    text-decoration: underline;
}

La

2
NullPoiиteя

J'ai dû faire deux choses pour que Scrollspy fonctionne pour moi.

J'ai d'abord dû donner une hauteur au <body> élément:

<style>

  .body
  {
    height: 100%;
  }

</style>    

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">

I pensez c'est parce que scroll-spy essaie d'obtenir la hauteur de l'élément que vous espionnez, mais s'il n'y a pas de hauteur spécifiée pour votre élément, il obtient un null ( ou 0?), ce qui semble casser les calculs du script.

Deuxièmement, je devais m'assurer qu'il y avait suffisamment d'espace vertical entre mes éléments d'identification (que les ancres de navigation pointent vers).

Je ne pouvais pas déterminer la quantité exacte d'espace nécessaire (cela dépendait de l'attribut de décalage de données, donc cela a probablement quelque chose à voir avec cela), mais je pense que si vous avez une hauteur définie pour votre élément espion et scrollspy ne fonctionne toujours pas - ajoutez simplement plus de contenu entre vos éléments id.

1
Jerreck
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});
0
Manikandan Jyothimani
.nameClasse {
  position: relative;
  overflow: auto;
  height: 330px;
}

<div data-spy="scroll" data-target="#navbarVertical" data-offset="0" class="nameClass">
0
expedito freitas

Je l'ai fait comme ça. pour la cible de données, j'utilise le nom de classe . navbar

      <body data-spy="scroll" data-target=".navbar" data-offset="50">
       <nav class="navbar navbar-default navbar-fixed-top" >
0
Ayush Chaurasia

Après des heures de frustration et de recherche, j'ai découvert que beaucoup de gens n'étaient pas satisfaits non plus de la documentation de Bootstrap Affix ( www.mtjhax.wordpress.com ). Après tout cependant, cette solution sur Bootply a fonctionné pour moi: http://bootply.com/63937

Supposons que votre navigation ait l'identifiant "navbar", le corps devrait ressembler à ceci:

<body data-spy="scroll" data-target="#navbar">
    ...
</body>

Et la barre de navigation elle-même devrait être la suivante:

<div class="navbar" id="navbar">
    <ul class="nav navbar-nav">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>               
</div>

Vous avez ensuite initialisé le plugin ...

$('#nav').affix({
    offset: {top: 0}
});

... et donnez à la navigation un style approprié:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
0
radu.luchian