Hola.
Tengo una función que muestra el header (logotipo + navegación + telefono) cuando se sube con el scroll y desaparece cuando se baja.
No tiene nada de especial, y se desarrolla de esta forma:
Código:
<script defer>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("inicial").style.top = "0";
document.getElementById("inicial").style.backgroundColor = "rgba(1, 56, 106, 0.9)";
} else {
document.getElementById("inicial").style.top = "-100%";
}
prevScrollpos = currentScrollPos;
if (document.body.scrollTop > 180 || document.documentElement.scrollTop > 180) {
document.getElementById("inicial").style.backgroundColor = "rgba(1, 56, 106, 0.9)";
} else {
document.getElementById("inicial").setAttribute("style", "background-color: rgba(1, 56, 106, 0); transition: 1s");
}
}
</script>
Funciona perfectamente y sin problemas.
El problema es que en una sección tengo un subidor con jquery tan común como podéis ver:
Código:
(function($){
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000,function()
{
location.hash = target;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
También funciona perfectamente.
El problema es que el subidor no lleva al usuario hasta el header sino hasta un índice que está unos 2000 píxeles más abajo, y que tiene un título y un párrafo de introducción.
Cuando pulsas el subidor, te lleva hasta el ancla, pero entonces aparece el header (de 200px de alto), que tapa el título y párrafo del índice. El problema es peor en los móviles.
¿Hay alguna forma de evitar que se apliquen los estilos al header SOLO cuando se usa el subidor?
Gracias.