Comment utiliser Bootstrap de défilement espion?

Je ne peux pas tout à fait obtenir le défilement espion pour fonctionner correctement avec une verticale de la valeur liquidative. Vous trouverez ci-dessous le code que j'utilise. Pour une raison quelconque, seulement "Deux" s'active.

Quelqu'un a une idée de ce qui est mal?

<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>

InformationsquelleAutor user1780429 | 2012-10-30

twitter-bootstrap twitter-bootstrap-2

36

Dans le tri pour moi-même, j'ai trouvé que l'élément d'être épié doit avoir une barre de défilement.

Prendre un coup d'oeil à ce Violon: http://jsfiddle.net/adamp/qgU6h/1/

Vous pouvez espionner directement sur l'élément de corps ($('body').scrollspy()) ou de donner à votre contenu explicite de la hauteur et de la force pour afficher une barre de défilement.

(Si vous regardez le Bootstrap documentation exemple, il ne le fixe-hauteur de la tour.)
- documentation exemple lien est mort, vous pouvez le trouver ici maintenant.
- J'ai édité le scrollspy Url de documentation par la poste.
- +1 pour le "espionné élément doit avoir une barre de défilement", c'est ce qui fait l'affaire pour moi!
- Hmm, j'ai essayé sous ie/ff/chrome et le violon ne semble pas fonctionner pour moi. Suis-je fou? "Page1", "Page2" etc les titres ne s'allume pas ou la mettre en évidence en aucune façon comme je l'ai faites défiler vers le haut / vers le bas.
- L'URL pour les liens externes bootstrap-scrollspy.js avait rompu, de sorte que l'ensemble de la chose n'a pas fonctionné. Je fixe le Violon, et je crois qu'il devrait fonctionner à nouveau.
- Il est intéressant de noter que scrollspy uniquement fonctionne avec trajets et navbars. Évolution de la classe nav à nav2 va casser le dessus de violon: jsfiddle.net/r78U9
- Et que si vous activez la scrollspy via JS, vous n'avez pas besoin d'avoir une barre de défilement: jsfiddle.net/Ra3EM
- Le lien vers la documentation est de Bootstrap 2, qui est hors de date. Ici la mise à jour du lien
InformationsquelleAutor adam-p

vous pouvez faire cela 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;
}

Merci pour la réponse. Cependant, je ne sais toujours pas quel est le problème avec le code d'origine.
En fait, j'ai essayé d'extraire votre exemple dans un fichier autonome, et il ne fonctionne pas pour moi. Voir ici: dl.dropbox.com/u/18323746/Tmp/html-playground/...
Le violon ne semble pas fonctionner? J'ai essayé plusieurs navigateurs...
moi aussi, peut-être la bootstrap.js de la démo est trop vieux, j'ai changer la bootstrap.js et il fonctionne très bien jsfiddle.net/yujiangshui/mCxqY/313

InformationsquelleAutor NullPoiиteя

2

Grâce Jerreck j'ai pu faire le mien fonctionne avec l'aide de
```
height: 100%;
```
dans le corps sélecteur de mon CSS

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

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

Le début du corps du sélecteur dans mon CSS qui va comme ceci:
```
body {
    position: relative;
    height: 100%;
    /* … */
}
```
Dans le <body> en HTML, j'ai dû enlever
```
data-offset="0"
```
il est donc maintenant comme ceci
```
<body data-spy="scroll" data-target="#navigation">
```
InformationsquelleAutor Daniel G Pare
1

J'ai eu à faire deux choses pour obtenir scrollspy à travailler pour moi.

Tout d'abord, j'ai dû donner une hauteur à l' <body> élément:
```
<style>

  .body
  {
    height: 100%;
  }

</style>    

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">
```
Je pense c'est parce que de défilement-spy est d'essayer d'obtenir la hauteur de l'élément que vous êtes d'espionnage sur, mais si il n'y a pas une hauteur spécifiée pour votre élément, il reçoit une valeur null (ou 0?) valeur, ce qui semble être de casser le script de calculs.

Deuxième, j'ai dû faire en sorte qu'il y avait assez d'espace vertical entre mon id éléments (que la valeur liquidative ancres sont dirigés l'un vers).

Je n'arrivais pas à déterminer le montant exact de l'espace nécessaire (il n'varier selon les données de décalage de l'attribut, donc il a probablement quelque chose à voir avec ça), mais je pense que si vous avez une hauteur définie pour votre espion élément et scrollspy ne fonctionne toujours pas - il suffit d'ajouter plus de contenu entre votre id éléments.

InformationsquelleAutor 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();
    });
});

InformationsquelleAutor Manikandan Jyothimani

J'ai fait comme ça. pour les données de la cible-je utiliser le nom de la classe .navbar

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

InformationsquelleAutor Ayush Chaurasia

0
```
.nameClasse {
  position: relative;
  overflow: auto;
  height: 330px;
}

<div data-spy="scroll" data-target="#navbarVertical" data-offset="0" class="nameClass">
```
- Bienvenue à Débordement de Pile! En général, les réponses sont beaucoup plus utiles que s'ils incluent une explication de ce que le code est destiné à faire, et pourquoi cela résout le problème sans introduire d'autres.
InformationsquelleAutor expedito freitas
0

Après des heures de frustration et de recherche, j'ai trouver que beaucoup de gens ne sont également pas heureux avec Bootstrap Apposer documentation (http://www.mtjhax.wordpress.com). Après tout, le regardant autour de même si, cette solution Bootply fonctionné pour moi: http://bootply.com/63937

Dire que votre navigation en a eu l'id de "barre de navigation", le corps devrait ressembler à ceci:
```
<body data-spy="scroll" data-target="#navbar">
    ...
</body>
```
Et la barre de navigation en elle-même devrait être comme suit:
```
<div class="navbar" id="navbar">
    <ul class="nav navbar-nav">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>               
</div>
```
Vous ensuite initialisé le plugin...
```
$('#nav').affix({
    offset: {top: 0}
}); 
```
... et de donner à la navigation bon style:
```
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
```
- La question est à propos de la scrollspy fonctionnalité, pas l'apposer un.
InformationsquelleAutor radu.luchian

Vous devez vous connecter pour publier un commentaire.