Eduard Valentin Eduard Valentin - 3 months ago 9
Javascript Question

Stop script from happening when I resize down the window and do another one

I'm trying to make a responsive navbar on a website. I have a script running to add some effects to navbar.But when window size is less than 700 px I want to stop everything that I'm doing with the navbar, and do another script.I'm doing this for mobile devices but also I want this to happen when the user resizes down the window.

My problem is : It's ok when the width is > 700px ,but when i resize down to less than 700px the script is still running, and i don't want that.

Also it works ok if the page first loads with the width less than 700px,but that doesn't solves the problem.

I have my script here with a JSFIDDLE:

var WindowWidth = $(window).width();

$(document).ready(function($) {
handleNav();
$(window).resize(function() {
//here i call the function again after i resize to check if the condition of window width > 700px is stil true

WindowWidth = $(window).width();
handleNav();
});
});


function handleNav() {

if (WindowWidth > 700) {
$(document).scroll(function() {

if (300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100) {
$('#abs-header').css({
'opacity': (500 / ($(document).scrollTop() + 1))
});
$('#abs-header').css({
'background-color': 'rgba(113, 20, 20,1)'
});
}

if ($(document).scrollTop() < 100) {
$('#abs-header').css({
'background-color': 'transparent'
});
}
});
} else {
//Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.
}
}


I tried multiple aproaches, neither of those worked.I really need your help!

Answer

That's because you add the scroll event handler when the screen is more than 700px and then it just keeps running regardless of the later widths.

Correct code:

$(document).ready(function(){
    handleNav();

    $(window).resize(function(){

        //here i call the function again after i resize to check if the condition of window width > 700px is stil true            
        handleNav();    
   });
});


function handleNav() {

    if ( $(window).width() > 700) {
        $(document).scroll(function() {

            if(300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
                $('#abs-header').css({'opacity': (500 / ($(document).scrollTop()+1))});
                $('#abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if($(document).scrollTop() < 100){
                $('#abs-header').css({'background-color' : 'transparent'});
            }
        });
    } else {
        //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.

        // remove handler
        $(document).off('scroll');

    }
}

or rather just put your logic inside scroll handler and check the width there

$(document).ready(function(){

    $(document).scroll(function() {
        if ( $(window).width() > 700) {
            if (300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
                $('#abs-header').css({'opacity': (500 / ($(document).scrollTop()+1))});
                $('#abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if($(document).scrollTop() < 100){
                $('#abs-header').css({'background-color' : 'transparent'});
            }
        } else {
             //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.
        }
    });

});
Comments