title: jQuery on window resize and document load when certain conditions are met
body: <p>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.</p>
  
  <p>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 <code>$(window).width() &lt;= 960</code> is not executed. If a refresh the page with the 800px width already set, everything works perfectly.</p>
  
  <p>I tried several things with <code>$(window).resize()</code> but nothing has worked so far.</p>
  
  <p>The code I'm using for modifying the CSS is the following :</p>
  
  <pre><code>function updateContainer() {
  
      $(window).scroll(function() {
  
          if ( $(window).width() &gt; 960 ) {
  
                  if( $(window).scrollTop() &gt; 40 &amp;&amp; $(document).height() - $(window).height() &gt; 79 ) { 
                      $(".site-header").addClass("site-header-scrolled");
                      } else if ($(window).scrollTop() &lt;= 40) {
                      $(".site-header").removeClass("site-header-scrolled");
                  }
  
          } else {
  
              if( $(window).scrollTop() &gt; 40 &amp;&amp; $(document).height() - $(window).height() &gt; 160 ) {
  
                  $(".title-area").hide(200);
                  $(".nav-menu").addClass("nav-menu-scrolled").hide(200);
  
                  if ( !$(".mobile-nav").length ) {
                              $(".title-area").before('&lt;div class="mobile-nav"&gt;&lt;p&gt;Navigation ☰&lt;/p&gt;&lt;/div&gt;');   
                  } else {
                      return false;
                  }
  
                  $(".mobile-nav").click(function(){
                          $(".nav-menu").slideToggle(200);
                  });
  
                  } else if ($(window).scrollTop() &lt;= 40) {
  
                  $(".title-area").show(200);
                  $(".nav-menu").removeClass("nav-menu-scrolled").show(200).removeAttr("style");
                  $(".mobile-nav").remove();
  
              }
  
          }
  
      });
  </code></pre>
  
  <p>I have also wrapped this same code in :</p>
  
  <pre><code>    $(document).ready(function() {
           "use strict";
      });
  </code></pre>
  
  <p>I'm not sure if it's absolutely necessary.</p>
  
  <p>I tried the first two solutions found here : <a href="https://stackoverflow.com/questions/9828831/jquery-on-window-resize">jQuery on window resize</a>. While</p>
  
  <pre><code>    $(document).ready(function () {
          updateContainer();
          $(window).resize(function() {
              updateContainer();
          });
      });
  
  }
  </code></pre>
  
  <p>kind of works for me, everything becomes buggy. Code for both cases (&lt;= 960px and > 960px) is applied at the same time.</p>
  
  <p>In advance, I thank you for your help !!</p>