CODEWITHSUNDEEP
javascriptjqueryresize
Marco Jacobs
Marco Jacobs

Reputation: 55

Execute javascript only above certain width with resize

I'm currently developing a website which has a sticky menu function. I've got the normal javascript to work good, which adds some classes once the client scrolls past 150px.

I now face the problem that I don't want the classes to be added once people view the website below 725px, so I added a rule that it only executes the script above 725px but the problem is this:

If I resize the window back to full the function won't work anymore, so I created another rule with the javascript resize function but I can't get it to work..

Here is my script:

$(document).ready(function(){
var mainbottom = 150;
if($(window).innerWidth() > 725) {
    $(window).on('scroll',function(){

        stop = Math.round($(window).scrollTop());
        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }
     });
    }
});
$(window).resize(function() {
var mainbottom = 150;
if($(window).innerWidth() > 725) {
    $(window).on('scroll',function(){

        stop = Math.round($(window).scrollTop());
        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }
    });
    }
});

I'll hope somebody can help me with this problem.

Upvotes: 0

Views: 115

Answers (2)

Laurens
Laurens

Reputation: 91

First off, you should keep your code DRY. So preferably never copy paste any code around, bacause you will have to edit all the copies when you have to alter the behaviour or fix bugs.

You have not but your second $(window).resize() handler in the onready handler, so maybe that is why it is not triggered.

This should work:

$(document).ready(function(){
    var mainbottom = 150;

    function onScroll () {
        stop = Math.round($(window).scrollTop());

        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }   
    }

    var widthExceeded = false;
    $(window).resize(function() {
        $(window).innerWidth() > 725) {
            if (!widthExceeded) {
                $(window).on('scroll', onScroll);
            }
            widthExceeded = true;
        } else {
            if (widthExceeded) {
                $(window).off('scroll', onScroll);
            }
            widthExceeded = false;
        }
    }).resize();
});

Upvotes: 1

Florian Motteau
Florian Motteau

Reputation: 3724

You are defining a scroll event listener inside a resize event listener, so basically you're declaring the scroll listener on every resive event (so the scroll listener is defined many many times if the user resize its browser). You need to correct this.

You could declare a flag (boolean) to indicate wether the viewport is below 725px or not. It should be initialized on $(document).ready(...) by testing the viewport dimensions.

Create a resize event listener which updates this flag by testing the viewport width, so you always know if you need to manage your classes or not.

At this point, console.log(your_flag) in your resize event listener to check if it works fine.

Then declare a scroll event listener, and in this listener the first thing you want to do is test the flag value. If viewport > 725, then manage the classes, otherwise do nothing.

Upvotes: 0

Related Questions