title: Disable scroll event on browser resize
body: <p>So I have a basic script that applies a fixed class to a div (.filter-target) when the user scrolls past a certain point of the page. What I would like to know is how I can disable the scroll event if the user resizes their browser and the width of the browser is &lt;1100px (i.e. the minWidth variable).</p>
  
  <pre><code>var app = {};
  
  app.filter = (function() {
      var module = {};
  
      var $filter = $('.filter-target');
   // Creates a spacer, this is to push the content of the page down the same size of the floating menu
      var $filterSpacer = $('&lt;div /&gt;', {
          "class": "filter-drop-spacer",
          "height": $filter.outerHeight()
      });
  
      var minWidth = Modernizr.mq('only screen and (min-width: 1100px)');
      var windowWidth = $(window).width();
  
      module.init = function() {
  
          var fixedFilter = function() {
              $filter
                  .before($filterSpacer)
              .addClass("is-fixed") 
              .css('width', $('.page-content').width());
          };
  
          var relativeFilter = function() {
              $filter
                  .removeClass("is-fixed")
                  .css('width', '');
  
              $filterSpacer.remove(); 
          };
  
          var filterController = function() {
              if (minWidth == true) {
                  if (!$filter.hasClass('is-fixed') &amp;&amp; $(window).scrollTop() &gt; $filter.offset().top) {
                      // Checks the filter doesn't have the class fix and that vertical number of pixels hidden is greater than the navigations position on the page. This will get executed the first time the page scrolls past the point. I.E When you scroll hits the menu.
                      fixedFilter();
                  } else if ($filter.hasClass('is-fixed') &amp;&amp; $(window).scrollTop() &lt; $filterSpacer.offset().top) {
                      // If the navigation element has the fix class and that vertical number of pixels hidden is less than the top of the newly added spacer. I.E When you scroll UP past the spacer.
                      relativeFilter();
                  }
              } else {
                  relativeFilter();
              }
          };
  
          $(window).scroll(function() {
              filterController();
          });
  
      };
  
      return module;
  })();
  
  $(document).ready(function() {
      app.filter.init();
      console.log('filter');
  });
  </code></pre>