Quiero que mi barra de navegación solo se muestre después de desplazarse. Lo he hecho con JS pero hay un "paso" cuando se desliza hacia arriba o hacia abajo. Aquí está el código JS:
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function(){
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').slideDown(2000);
}
else {
$('.navbar').slideUp(2000);
}
});
});
});
Y el JSfiddle: http://jsfiddle.net/3dcg2ygw/
¿Cómo puedo conseguirlo sin problemas?
0
Laurent B.
3 sep. 2014 a las 13:00
2 respuestas
La mejor respuesta
El problema es que la barra de navegación tiene una altura mínima, intente esto en su código:
.navbar {
height: 97px;
background-color: #fff;
overflow:hidden;
min-height:0px;
}
0
Ruben R Aparicio
3 sep. 2014 a las 09:36
Usaría un fundido en la función jQuery
$(document).ready(function () {
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').fadeIn().slideDown();
} else {
$('.navbar').fadeOut().slideUp();
}
});
});
});
0
Matthew A Thomas
3 sep. 2014 a las 09:05
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.