jQuery on window resize and document load when certain conditions are met

Question

I have a jQuery script which inserts and removes some CSS classes when certain conditions are met. It is used to enhance a sticky menu at the top of a web page.

While the code is bug-free, I cannot figure out how to add a condition that re-executes this same code when the browser window is resized. For instance, if the browser width is initially detected as 1366px, even if I resize it to say 800px, the code that should apply for $(window).width() <= 960 is not executed. If a refresh the page with the 800px width already set, everything works perfectly.

I tried several things with $(window).resize() but nothing has worked so far.

The code I'm using for modifying the CSS is the following :

function updateContainer() {

    $(window).scroll(function() {

        if ( $(window).width() > 960 ) {

                if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 79 ) { 
                    $(".site-header").addClass("site-header-scrolled");
                    } else if ($(window).scrollTop() <= 40) {
                    $(".site-header").removeClass("site-header-scrolled");
                }

        } else {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 160 ) {

                $(".title-area").hide(200);
                $(".nav-menu").addClass("nav-menu-scrolled").hide(200);

                if ( !$(".mobile-nav").length ) {
                            $(".title-area").before('<div class="mobile-nav"><p>Navigation ☰</p></div>');   
                } else {
                    return false;
                }

                $(".mobile-nav").click(function(){
                        $(".nav-menu").slideToggle(200);
                });

                } else if ($(window).scrollTop() <= 40) {

                $(".title-area").show(200);
                $(".nav-menu").removeClass("nav-menu-scrolled").show(200).removeAttr("style");
                $(".mobile-nav").remove();

            }

        }

    });

I have also wrapped this same code in :

    $(document).ready(function() {
         "use strict";
    });

I'm not sure if it's absolutely necessary.

I tried the first two solutions found here : jQuery on window resize. While

    $(document).ready(function () {
        updateContainer();
        $(window).resize(function() {
            updateContainer();
        });
    });

}

kind of works for me, everything becomes buggy. Code for both cases (<= 960px and > 960px) is applied at the same time.

In advance, I thank you for your help !!

Instead of binding two different functions to the `scroll` event (which would need to be unbound when you resize your window), you could do `$(window).scroll(function() { if(width<=960){...}else{...} });` — blex, Mar 17 '16 at 17:48
Thanks, I'll do that. Initially I had the code at two separate locations and I just combined it without much thinking about simplifing it. — Highlanderix, Mar 17 '16 at 17:52
`updateContainer();` is taken from the example in http://stackoverflow.com/questions/9828831/jquery-on-window-resize. It's essentially all the code up there. I'll make the change, so it may become clearer. — Highlanderix, Mar 17 '16 at 18:33
I think that one part of the problem is that for instance `$(".site-header").removeClass("site-header-scrolled");` is not executed on window resize. — Highlanderix, Mar 17 '16 at 18:36
You have a total mess of scrollTop and sizes. You should refactor your idea. Also, calling a function that listens to a scroll is also a bet concept (the window resize that calls the window scroll...) — Roko C. Buljan, Mar 17 '16 at 18:42

score 0 · Accepted Answer · edited May 23 '17 at 11:59

I continued trying to solve the issue myself and managed to find a working solution after reading this thread jQuery: How to detect window width on the fly?.

I modified my original code to :

function updateContainer() {
    $(window).scroll(function() {

        if ( $(window).width() > 960 ) {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 79 ) { // scroll bug appears if 78 or lower
                add_desktop();
            } else if ($(window).scrollTop() <= 40 ) {
                remove_desktop();
            }

        } else {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 160 ) {
                add_mobile();
            } else if ($(window).scrollTop() <= 40 ) {
                remove_mobile();
                //alert (winwidth);
            }

        }

    });

}

The add_desktop, remove_desktop, add_mobile and remove_mobile are functions that add or remove the CSS styles for devices with higher or lower than 960px width.

The following code makes sure that the already applied (if even applied) styles are removed in the event of a window resize :

$(document).ready(function () {
    updateContainer();
    $(window).resize(function () {
        if ( $(document).width() > 960 ) {
            remove_mobile();
        } else {
            remove_desktop();
        }
    });
});

I tested this in Firefox, Chrome an IE and everything seems to work without issues.

Yet, I'm not sure if this solution is very resource-efficient. I would appreciate any help in improving this piece of code. I saw that we could use `throttle` or `debounce` methods from the underscore library to stop the `resize` code from executing too often. Would it be worth it to implement this ? — Highlanderix, Mar 18 '16 at 00:12

jQuery on window resize and document load when certain conditions are met

1 Answers1