twitter bootstrap - data - ¿Cómo utilizar Bootstrap scroll spy?
scrollspy materialize (8)
No logro que el espía de desplazamiento funcione correctamente con un navegador vertical. Abajo puedes encontrar el código que uso. Por alguna razón, solo "Dos" se activa.
¿Alguien tiene una idea de lo que 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>
Al ordenar esto por mí mismo, he descubierto que el elemento que se está espiando necesita tener una barra de desplazamiento .
Eche un vistazo a este Fiddle: http://jsfiddle.net/adamp/qgU6h/1/
Puede espiar directamente en el elemento del cuerpo ( $(''body'').scrollspy() ) o dar una altura explícita a su contenido y forzarlo a mostrar una barra de desplazamiento.
(Si nos fijamos en el ejemplo de documentación de Bootstrap, hace el truco de altura fija).
Después de horas de frustración e investigación, descubrí que muchas personas tampoco están satisfechas con la documentación de Bootstrap www.mtjhax.wordpress.com ( www.mtjhax.wordpress.com ). Sin embargo, después de mirar alrededor, esta solución en Bootply funcionó para mí: http://bootply.com/63937
Digamos que su navegación tenía el ID "barra de navegación", el cuerpo debería verse así:
<body data-spy="scroll" data-target="#navbar">
...
</body>
Y la barra de navegación en sí debería ser la siguiente:
<div class="navbar" id="navbar">
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Luego inicializó el plugin ...
$(''#nav'').affix({
offset: {top: 0}
});
... y le da el estilo de navegación adecuado:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
Gracias Jerreck pude hacer mis trabajos con la ayuda de
height: 100%;
en el selector de cuerpo de mi CSS
También recomendado por los chicos en Bootstrap http://getbootstrap.com/javascript/#scrollspy
He añadido la position: relative; en el cuerpo tambien
El comienzo del selector de cuerpo en mi CSS es así:
body {
position: relative;
height: 100%;
/* … */
}
En el <body> en HTML tuve que quitar
data-offset="0"
así que ahora es así
<body data-spy="scroll" data-target="#navigation">
Lo hice así. para el destino de datos utilizo el nombre de clase .navbar
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top" >
Tuve que hacer dos cosas para que scrollspy funcionara para mí.
Primero, tuve que dar una altura al elemento <body> :
<style>
.body
{
height: 100%;
}
</style>
<body data-spy="scroll" data-target="#scrollElement" data-offset="0">
Creo que esto se debe a que scroll-spy está intentando obtener la altura del elemento que está espiando, pero si no se especifica una altura para su elemento, se pasa un valor nulo (o 0?), Que Parece estar rompiendo los cálculos del guión.
En segundo lugar, tenía que asegurarme de que hubiera suficiente espacio vertical entre mis elementos de identificación (a los que apuntan los anclajes de navegación).
No pude averiguar la cantidad exacta de espacio necesario (varió dependiendo del atributo de desplazamiento de datos, por lo que probablemente tenga algo que ver con eso), pero reconozco que si tiene una altura establecida en su elemento espía y scrollspy aún no funciona, solo agrega más contenido entre tus elementos de identificación.
puedes hacer esto como 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;
}
Al aire libre
$(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();
});
});
.nameClasse {
position: relative;
overflow: auto;
height: 330px;
}
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0" class="nameClass">