twitter-bootstrap - trigger - scrollspy jquery
¿Cómo configuro el desplazamiento para ScrollSpy en Bootstrap? (10)
Tengo un sitio con la barra de navegación fija en la parte superior y 3 divisiones debajo en el área de contenido principal.
Estoy tratando de usar scrollspy desde el framework bootstrap.
Lo hago destacando con éxito los diferentes títulos en el menú cuando se desplaza más allá de los divs.
También lo tengo así que cuando haces clic en el menú, se desplazará a la parte correcta de la página. Sin embargo, el desplazamiento es incorrecto (no está teniendo en cuenta la barra de navegación, por lo que necesito compensar por unos 40 píxeles)
Veo en la página de Bootstrap que menciona una opción de compensación, pero no estoy seguro de cómo usarla.
Tampoco soy lo que significa cuando dice que puedes usar scrollspy con $(''#navbar'').scrollspy() , no estoy seguro de dónde incluirlo, así que no lo hice y todo parece estar funcionando (excepto el desplazamiento).
Pensé que el offset podría ser el data-offset=''10'' en la etiqueta del cuerpo, pero no hace nada por mí.
Tengo la sensación de que esto es algo realmente obvio y me lo estoy perdiendo. ¿Alguna ayuda?
Mi código es
...
<!-- note: the data-offset doesn''t do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VIPS</a>
<ul class="nav">
<li class="active">
<a href="#trafficContainer">Traffic</a>
</li>
<li class="">
<a href="#responseContainer">Response Times</a>
</li>
<li class="">
<a href="#cpuContainer">CPU</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div id="trafficContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="responseContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="cpuContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
</div>
...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>
Bootstrap usa desplazamiento para resolver solo el espionaje, no desplazarse. Esto significa que desplazarse al lugar correcto depende de usted.
Pruebe esto, funciona para mí: agregue un controlador de eventos para los clics de navegación.
var offset = 80;
$(''.navbar li a'').click(function(event) {
event.preventDefault();
$($(this).attr(''href''))[0].scrollIntoView();
scrollBy(0, -offset);
});
Lo encontré aquí: https://github.com/twitter/bootstrap/issues/3316
Creo que el desplazamiento puede hacer algo con la posición inferior de la sección.
Solucioné mi problema, igual que el tuyo, al agregar
padding-top: 60px;
en la declaración para la sección en bootstrap.css
¡Espero que ayude!
De la cuestión de arranque # 3316 :
[Esto] solo tiene la intención de modificar los cálculos de desplazamiento: no cambiamos el clic real de anclaje
Por lo tanto, la compensación de configuración solo afecta a dónde scrollspy cree que se desplaza la página . No afecta al desplazamiento cuando hace clic en una etiqueta de anclaje.
Usar una barra de navegación fija significa que el navegador está desplazándose al lugar equivocado. Puedes arreglar esto con JavaScript:
var navOffset = $(''.navbar'').height();
$(''.navbar li a'').click(function(event) {
var href = $(this).attr(''href'');
// Don''t let the browser scroll, but still update the current address
// in the browser.
event.preventDefault();
window.location.hash = href;
// Explicitly scroll to where the browser thinks the element
// is, but apply the offset.
$(href)[0].scrollIntoView();
window.scrollBy(0, -navOffset);
});
Sin embargo, para garantizar que scrollspy resalte el elemento actual correcto, aún necesita establecer el desplazamiento:
<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">
Aquí hay una demo completa en JSFiddle .
Alternativamente, puede rellenar sus etiquetas de anclaje, como lo sugieren los trucos de CSS .
a[id]:before {
display: block;
content: " ";
// Use the browser inspector to find out the correct value here.
margin-top: -285px;
height: 285px;
visibility: hidden;
}
El truco, como aludió Tim, es aprovechar el relleno. Entonces, el problema es que su navegador siempre quiere desplazar su ancla a la parte superior exacta de la ventana. si establece su delimitador donde comienza realmente el texto, será ocluido por la barra de menú. En cambio, lo que debes hacer es establecer tu ancla en la identificación de la etiqueta del contenedor <section> o <div> , que la barra de navegación / navegación usará automáticamente. Luego, debe configurar su padding-top para el contenedor en la compensación de cantidad que desee, y el margin-top para el contenedor en el lado opuesto al padding-top . Ahora el bloque de su contenedor y el anclaje comienzan en la parte superior exacta de la página, pero el contenido interno no comienza hasta debajo de la barra de menú.
Si está usando anclajes regulares, puede lograr lo mismo utilizando un margen negativo superior en su contenedor como se indica arriba, pero sin relleno. Luego, coloca un ancla <a target="..."> normal como el primer hijo del contenedor. Luego, diseñe el segundo elemento secundario con un margin-top opuesto pero igual, pero utilizando el selector .container:first-child + .
Todo esto supone que su etiqueta <body> ya tiene su margen establecido para comenzar debajo de su encabezado, que es la norma (de lo contrario, la página se mostraría con texto ocluido inmediatamente).
Aquí hay un ejemplo de esto en acción. Cualquier cosa en su página con una identificación se puede vincular al marcar # the-elements-id en el final de su URL. Si hace que todas sus etiquetas h etiquetas ad dt con ids link-able ( como github lo hace ) con algún tipo de script que inyecte un pequeño enlace a la izquierda de ellas ; agregando lo siguiente a su CSS se ocupará de la compensación de barra de navegación para usted:
body {
margin-top: 40px;/* make room for the nav bar */
}
/* make room for the nav bar */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
padding-top: 60px;
margin-top: -40px;
}
Puedes cambiar el desplazamiento de scrollspy sobre la marcha con esto (suponiendo que espíes al cuerpo):
offsetValue = 40;
$(''body'').data().scrollspy.options.offset = offsetValue;
// force scrollspy to recalculate the offsets to your targets
$(''body'').data().scrollspy.process();
Esto también funciona si necesita cambiar el valor de compensación dinámicamente. (Me gusta que Scrollspy cambie cuando la siguiente sección esté a la mitad de la ventana, así que necesito cambiar el desplazamiento durante el cambio de tamaño de la ventana).
Si quieres una compensación de 10, podrías poner esto en tu cabeza:
<script>
$(''#navbar'').scrollspy({
offset: 10
});
</script>
La etiqueta de tu cuerpo se vería así:
<body data-spy="scroll">
Solo establece:
data-offset="200"
data-offset es por defecto "50" y es equivalente a 10px, así que simplemente aumente data-offset y su problema se resuelva.
También puede abrir bootstap-offset.js y modificar
$.fn.scrollspy.defaults = {
offset: 10
}
ahí.
Tuve problemas con las soluciones de acjohnson55 y Kurt UXD. Ambos funcionaron para hacer clic en un enlace al hash, pero el desplazamiento scrollspy aún no era correcto.
Se me ocurrió la siguiente solución:
<div class="anchor-outer">
<div id="anchor">
<div class="anchor-inner">
<!-- your content -->
</div>
</div>
</div>
Y el CSS correspondiente:
body {
padding-top:40px;
}
.anchor-outer {
margin-top:-40px;
}
.anchor-inner {
padding-top:40px;
}
@media (max-width: 979px) {
body {
padding-top:0px;
}
.anchor-outer {
margin-top:0px;
}
.anchor-inner {
padding-top:0px;
}
}
@media (max-width: 767px) {
body {
padding-top:0px;
}
.anchor-outer {
margin-top:0px;
}
.anchor-inner {
padding-top:0px;
}
}
Tendrá que reemplazar el relleno / margen de 40px con la altura de su barra de navegación, y la identificación de su anclaje.
En esta configuración, incluso puedo observar un efecto de establecer un valor para el atributo de compensación de datos. Si encuentra valores grandes para el offset de datos alrededor de 100-200, se genera un comportamiento más esperado (el scrollspy- "cambio" ocurrirá si el encabezado está en el medio de la pantalla).
También encontré que scrollspy es muy sensible a errores como etiquetas div no cerradas (lo cual es bastante obvio), por lo que http://validator.w3.org/check era mi amigo aquí.
En mi opinión scrollspy funciona mejor con secciones completas que llevan la identificación de anclaje, ya que los elementos de anclaje regulares no conducen a los efectos esperados cuando se desplaza hacia atrás (el "interruptor" scrollspy eventualmente sucede tan pronto como golpeas el elemento de anclaje, por ejemplo tu rumbo, pero en ese momento ya ha desplazado el contenido que el usuario espera pertenecer al título correspondiente).
.vspace elemento .vspace 40px de altura sujetando el anclaje antes de cada uno de mis elementos h1 .
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
En el CSS:
.vspace { height: 40px;}
Está funcionando muy bien y el espacio no está disminuyendo.