execute jQuery function depending on window width
<p>I have a jQuery function that I want only to execute when the browser window have a minimum width (the function is to add a smooth scroll effect when go up and down between internal links on the page, but interfere with a menu that I am trying to habiliate when the width is less than the minimum width), I almost get it with the following lines, that are executed when page load and when window resized, It works well when I pass from a sub-minimum width (no-effect) to a more than minimum width (effect) but not when is backward (from effect to no-effect). Is like some is missing, an instruction to erase previous code or variable in the else statement, but I dont know what is. Here the jQuery code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// the code has 3 detection modes for the width of the browser so it is repeated 3 times

$(window).on("load resize",function(){
  if (self.innerWidth &gt; 996) { //first detection mode
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  }
  else {
    // here some instruction that reset values or something that provoke that
    // previous code, loaded when window is &gt; 996 don't be active when window &lt; 996
  }
});

$(window).on("load resize",function(){
  if (document.documentElement &amp;&amp; document.documentElement.clientWidth &gt; 996) { //second detection mode
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  }
  else {
    // here some instruction that reset values or something that provoke that
    // previous code, loaded when window is &gt; 996 don't be active when window &lt; 996
  }
});

$(window).on("load resize",function(){
  if (document.body &gt; 996) { //third detection mode
    $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  }
  else {
    // here some instruction that reset values or something that provoke that
    // previous code, loaded when window is &gt; 996 don't be active when window &lt; 996
  }
});</code></pre>
</div>
</div>
</p>

<p><strong>Solved for me!</strong></p>

<p>I solved the question by doing something that I had to have done from the beginiging, but my temporal ignorance (I am learning) make it difficult to see then. Simply I confine the effect to work in a section with id="content" and no to all the page (including menus) to do this I specify this on the first line. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#content a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
      return false;
    }
  }
});</code></pre>
</div>
</div>
</p>

<p>Sorry by the relative waste of time, anyways the intrinsic problem that I defined above is real and I saw other posts in this web with a very similar question; that the effect activate when pass from no active (in small window) to active (in big window) but not deactivate when pass from active (in big window) to no active (in small window), and have no answers.</p>