0

Trataré de ser lo más especifico posible, una pagina consiste en un menu que al hacer responsive se le ha aplicado la opción "fixed", cada opción de menú tiene como enlaces a anclas que dirige a cierta zona de la página, en el modo desktop funciona de maravilla, pero en modo responsivo ya no tanto, porque el contenido del enlace se coloca más arriba siendo tapado por mi menu.

Abjunto el codigo:

<nav>
<a class="anclas" href="index.html">Inicio</a>
<a class="anclas" href="#servicios">Servicios</a>
<a class="anclas" href="#eventos">Condiciones</a>
<a class="anclas" href="#clientes">Clientes</a>
<a class="anclas" href="#contacto">Contacto</a>
</nav>

Este es el codigo js:

$(document).on("click", "a.anclas", function(e) {
        e.preventDefault();
        var b = $(this), n = b.attr("href");
        $("html, body").stop().animate({
            scrollTop: $(n).offset().top
        }, 1e3);
    });

¿Como hago para que mi contenido baje y se vea de una forma correcta?

1 respuesta 1

0

Podrías probar restando el alto del menu al numero que resulta de $(n).offset().top.

$(document).on("click", "a.anclas", function(e) {
    e.preventDefault();
    var b = $(this), n = b.attr("href");
    $("html, body").stop().animate({
        scrollTop: $(n).offset().top - 100
    }, 1e3);    
});

El número 100 es igual al alto de tu menu en pixeles. Debes modificarlo.

Y para que afecte sólo un ancho específico:

$(document).on("click", "a.anclas", function(e) {
    e.preventDefault();
    var b = $(this), n = b.attr("href");

    if (window.innerWidth < 1024) {
        $("html, body").stop().animate({
            scrollTop: $(n).offset().top - 100
        }, 1e3); 
    } else {
        $("html, body").stop().animate({
            scrollTop: $(n).offset().top
        }, 1e3);
    }

});

En este caso, el ajuste sólo afectaría a un ancho de ventana menos a 1024px. Lo puedes ajustar según cuál es el breakpoint de tu menu.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.