title: Making the following code work for responsive capabilities
body: <p>I have this following code to make the top nav bar disappear, the question I'm asking is that how would I go about making it only work in widths of under 680 pixels? Apart from that it works totally fine. </p>
  
  <pre><code>var mywindow = $(window);
          var mypos = mywindow.scrollTop();
          var up = false;
          var newscroll;
          mywindow.scroll(function () {
              newscroll = mywindow.scrollTop();
              if (newscroll &gt; mypos &amp;&amp; !up) {
                  $('header').fadeOut();
                  up = !up;
                  console.log(up);
              } else if(newscroll &lt; mypos &amp;&amp; up) {
                  $('header').fadeIn();
                  up = !up;
              }
              mypos = newscroll;
          });
  </code></pre>
  
  <p>FIXED. Mostly. The Script will still stop / start working when the width is passed by resizing the window. Not sure how to stop this. </p>
  
  <p>//remove navbar on lower width pages</p>
  
  <pre><code>   function toggleBar(){
          var mywindow = $(window);
          var mypos = mywindow.scrollTop();
          var up = false;
          var newscroll;
  
          mywindow.scroll(function () {
              newscroll = mywindow.scrollTop();
              if (newscroll &gt; mypos &amp;&amp; !up) {
                  $('header').stop().fadeOut();
                  up = !up;
                  console.log(up);
              } else if(newscroll &lt; mypos &amp;&amp; up) {
                  $('header').stop().fadeIn();
                  up = !up;
              }
              mypos = newscroll;
              });
          }
  
  //REMOVE NAVBAR (place this in document load)
          $(window).load(function() {
            var pageWidth = $(window).width(); 
                      if (pageWidth &lt; 640){
                          toggleBar();
                          $('header').attr('href','../../../css/main.css');                  
                      }      
  
          });
  </code></pre>