Comment utiliser Bootstrap scroll spy?
Je n'arrive pas à faire fonctionner correctement le scroll spy avec un nav vertical. Vous trouverez ci-dessous le code que j'utilise. Pour une raison quelconque, seulement "deux" devient actif.
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>
8 réponses
Dans le tri pour moi-même, j'ai trouvé que l'élément d'être épié besoin d'avoir une barre de défilement.
jetez un oeil à ce Violon: http://jsfiddle.net/adamp/qgU6h/1/
Vous pouvez soit espion directement sur l'élément de corps ($('body').scrollspy()) ou donnez à votre contenu une hauteur explicite et forcez-le à afficher une barre de défilement.
(Si vous regardez le Bootstrap exemple de documentation, il fait la hauteur fixe astuce.)
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 Jerreck j'ai pu faire mes travaux 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 sélecteur de corps dans mon CSS va comme ceci:
body {
position: relative;
height: 100%;
/* … */
}
Dans le <body> en HTML j'ai dû supprimer
data-offset="0"
alors c'est maintenant comme ça
<body data-spy="scroll" data-target="#navigation">
j'ai dû faire deux choses pour que scrollspy travaille pour moi.
<body> elément:<style>
.body
{
height: 100%;
}
</style>
<body data-spy="scroll" data-target="#scrollElement" data-offset="0">
deuxièmement, je devais m'assurer qu'il y en avait assez espace vertical entre mes éléments id (vers lesquels pointent les ancres nav).
Je n'ai pas pu calculer la quantité exacte d'espace nécessaire (il a varie en fonction de l'attribut data-offset, donc il a probablement quelque chose à voir avec cela), mais je pense que si vous avez une hauteur fixée à votre élément espion et scrollspy ne fonctionne toujours pas - il suffit d'ajouter plus de contenu entre vos éléments d'id.
$(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();
});
});
j'ai fait comme ça. pour la cible de données j'utilise le nom de classe .barre de navigation
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top" >
.nameClasse {
position: relative;
overflow: auto;
height: 330px;
}
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0" class="nameClass">
après des heures de frustration et de recherche, j'ai découvert que beaucoup de gens n'étaient pas satisfaits de la documentation de Bootstrap Affix (www.mtjhax.wordpress.com). Après tous les regards, Cette solution sur Bootply a fonctionné pour moi:http://bootply.com/63937
si votre navigation avait l'id "navbar", 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 alors initialisé le plugin...
$('#nav').affix({
offset: {top: 0}
});
... et de donner à la navigation bon style:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}