0

estoy desarrollando un menu que se quede fijo cuando el scrollTop sea > al tamaño del menu, con la ayuda de jquery, el objetivo es que desde el tamaño de pantalla >= a 1001px este efecto este disponible ya que a menor resolución se convierte en un menu de tipo hamburquesa, por ende no necesito fijar todo el menu si no el logo (hamburguesa), ya lo logre. El problema ahora es que cuando estoy en el navegador con un tamaño de pantalla < 1001px funciona, pero si maximizo la ventana del navegador tengo que actualizar el navegador para que reconosca que estoy en una ventana >= 1001px y asi aplique el efecto. Aquí el codigo...

if ($(window).width() >= 1001) {
    let altura_menu = $(".menu").outerHeight(true);
    $(window).on("scroll", function(){
        if( $(window).scrollTop() > altura_menu ) {

            $(".logotipo").css('top', '10px');
            $(".logotipo").css('width', '200px');
            $(".logotipo").css('position', 'fixed');

            $(".menu").css('background', '#01579b');
            $(".menu").css('paddingTop', '0px');
        }       
        else {

            $(".logotipo").css('top', '25px');
            $(".logotipo").css('width', '250px');
            $(".logotipo").css('position', 'absolute');

            $(".menu").css('background', 'transparent');    
            $(".menu").css('paddingTop', '20px');   

        }   
    });
}

Agradesco de ante mano, si saben otra forma de hacerlo, bienvenida sea.

1 respuesta 1

0

Claro que tienes que actualizar la pantalla para que el js se vuelva a ejecutar y vuelva a entrar a la condición, para que quede como tu quieres de que al redimensionar la pantalla se siga ejecutando deberías hacer algo así:

$(document).ready(function(){

    function condisionmenu(){
        if ($(window).width() >= 1001) {
            let altura_menu = $(".menu").outerHeight(true);
            $(window).on("scroll", function(){
                if( $(window).scrollTop() > altura_menu ) {

                    $(".logotipo").css('top', '10px');
                    $(".logotipo").css('width', '200px');
                    $(".logotipo").css('position', 'fixed');

                    $(".menu").css('background', '#01579b');
                    $(".menu").css('paddingTop', '0px');
                }       
                else {

                    $(".logotipo").css('top', '25px');
                    $(".logotipo").css('width', '250px');
                    $(".logotipo").css('position', 'absolute');

                    $(".menu").css('background', 'transparent');    
                    $(".menu").css('paddingTop', '20px');   

                }   
            });
        }
    }

    condisionmenu();

    $(window).resize(function() {
        condisionmenu();
    });

})

Simplemente es detectar por medio de la función resize() si la pantalla esta cambiando de tamaño.

Espero que te sirva, saludos !

2
  • Excelente! funciona, Camilo Vasquez, me has salvado de dos, gracias. el 6 oct. 2017 a las 20:25
  • Genial, te invito a que marques la respuesta para que los futuros desarrolladores sepan que fue una solución correcta al problema y lo puedan implementar. Saludos ! el 6 oct. 2017 a las 20:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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