Le he creado una página para la empresa de un amigo y me he encontrado con un problema y no consigo dar con la solución.
En la página tengo un menu flotante que, al hacer scroll va marcando la zona en la que se encuentra el usuario.
En la versión para PC y para Móviles (por lo menos Android) funciona a la perfección.
En problema lo tengo en las tablets Android. El menu se queda en medio de la pantalla pero los botones (o por lo menos sus acciones se quedan arriba del todo).
Me está volviendo loco.
Tengo que decir que el código JavaScript que he usado lo he ido recogiendo de otros menus.
El código CSS:
Código:
El codigo JavaScript:nav { z-index:9999; position:fixed; margin:0; top:0; width:100%; height:3.750em; text-align:center; transition:all .3s ease; }
Código:
La página es://AL HACER SCROLL
$(window).scroll(function(){
//SI BAJA MAS DE 150px
if($(this).scrollTop() >= 150){
//CAMBIA LOS ESTILOS DEL NAV POR
$("nav").css({
"background-color" : "rgba(52, 73, 94, 0.9)",
"border-bottom" : "1px solid grey"
});
//Y EL COLOR DE LOS ENLACES DEL MENU
//$("nav a").css({
// "color" : "#FFF"
//});
//SI VUELVE HACIA ARRIBA
} else {
//VUELVE A LOS ESTILOS ORIGINALES
$("nav").css({
"background-color" : "transparent",
"border-bottom" : "0"
});
//$("nav a").css({
// "color" : "#FFF"
//});
}
});
//UBICACION
$(function(){
// WAYPOINTS
$('.ubicacion').waypoint(
function(direction) {
if (direction ==='down') {
var wayID = $(this).attr('id');
} else {
var previous = $(this).prev();
var wayID = $(previous).attr('id');
}
$('.active').removeClass('active');
$('nav a[href=#'+wayID+']').addClass('active');
}, { offset: '5%' });
$('.navMovil a.extLink').on('click',function(){
window.location = 'index.html';
});
});
//VELOCIDAD
$(document).ready(function() {
NavScroll = $('.navBtn');
NavScroll.on('click',function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('html, body').animate({ scrollTop:$(href).offset().top },'slow');
});
});
http://www.vidrioartesania.com
Pueden echarme una mano?
Gracias de antemano y un saludo:
Javy
