title: Show/Hide Element on Scroll for certain width, toggle for other width
body: <p>I am trying to make a navigation that hides on down scroll and reappears when you scroll up, unless the window width is smaller than 775. If the width is smaller than 775, the behavior should be a toggle of the nav bar with it maintaining the fixed position when scrolling.</p>
  
  <p>I put together a <a href="http://codepen.io/surfbird/pen/OVBReP" rel="nofollow">codepen here</a> to demonstrate the problem I'm having.  If the window is > 775 when the page loads, it works fine, same with if the window is &lt; 775.  The problem is if the window is resized, the behavior gets wonky.  If you start small, toggle the nav, and then resize, the navigation doesn't appear until you start scrolling.  If you start big, and resize down, the fade in/fade out behavior is present on the navigation.</p>
  
  <p>Now, I realize people probably won't be resizing all the while they're using my site but this is driving me crazy. Surely there must be a way to have my cake and eat it too?</p>
  
  <p>I've tried different conditional statements checking for the css value for display, comparing window widths and also using the jQuery selector :visible. Same results for everything. Can anyone help me? Basically what I want is if <code>#hamburger</code> is showing (display: block), the toggle should be in effect. If <code>#hamburger</code> is sent to display: none, the fadein/fade out should be in effect.</p>
  
  <p>Here's where I am now:</p>
  
  <pre><code>//toggle hamburger icon + menu on mobile
  $('#hamburger').click(function() {
      $('nav').toggle();  
  });
  
  //hide/show nav on scroll
  function hideNav() {    
      var lastScrollTop = 0; 
      $(window).scroll(function(event){
          var st = $(this).scrollTop();
          if (st &gt; lastScrollTop)
              $('nav').fadeOut();  
          else 
              $('nav').fadeIn();
          lastScrollTop = st;
      });
  }
  
  //check window size on load
  var windowWidth = $(window).width();
  if (windowWidth &gt; 775)
      hideNav();
  
  //adjust if the window is resized
  function resizeWindow(){
      var newWindowWidth = $(window).width();
      if (newWindowWidth &gt; 775)
          hideNav();           
      else if (newWindowWidth &lt;= 775)
          $('nav').hide();
   }
  
   $(window).resize(resizeWindow);   
  </code></pre>