Problem when making a fixed menu with jquey

Question

Problem when making a fixed menu with jquey

Navigation

#1 by (0 votes)

0

I'm developing a menu that stays fixed when the scrollTop is > the size of the menu, with the help of jquery, the goal is that from the screen size > = to 1001px this effect is available since at lower resolution it becomes a hamburger type menu, therefore I do not need to fix all the menu if not the logo (hamburger), I already achieved it. The problem now is that when I'm in the browser with a screen size < 1001px works, but if I maximize the browser window I have to update the browser so that it recognizes that I am in a window> = 1001px and thus apply the effect. Here the code ...

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 beforehand, if they know another way to do it, welcome it.

javascript jquery html5 css3

asked by Odannys De La Cruz 06.10.2017 в 22:15

source

1 answer

problem with a query error when updating record from a spinner

score 0 · Accepted Answer

Of course you have to update the screen so that the js is run again and re-enter the condition, so that it remains as you want to resize the screen to continue executing you should do something like this:

$(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();
    });

})

It is simply to detect by means of the function resize() if the screen is changing in size.

I hope you serve, greetings!