Yelp Fixed Header v2

gistfile1.js

(function() {
  if ( ! document.body.classList.contains('logged-in') ) {
    alert('Please log in before using this bookmarklet.  I’m too lazy to make it work for logged-out.');
  } else {
    var fixAt = 77;
    // var showAt = 600;
    var headerClassList = document.querySelector('.app-header').classList;
    var lastScrollY = 0;
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > fixAt 
          && window.scrollY > lastScrollY
          && ! headerClassList.contains('narrow') ) {

        headerClassList.add('narrow');
        
      } else if (window.scrollY > fixAt 
          && window.scrollY < lastScrollY
          && headerClassList.contains('narrow') ) {

        headerClassList.remove('narrow');
      }
      
      lastScrollY = window.scrollY;
    });
  }
})();

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

@import "compass/css3/transform";


$transition: all 0.5s ease;

.logged-in {
  // Prevent "jump" in content offset
  #wrap {
    padding-top: 76px;
    overflow: hidden;
  }
  
  .biz-details .top-shelf {
    overflow: visible;
  }
  
  .header-top-addons {
    display: none;
  }
  
  .header-container {
    position: relative;
  }
  
  .app-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 76px;
    transition: $transition;
    
    // Position everything absolutely
    .logo {
      float: none;
      position: absolute;
      top: 9px;
      margin: 0;
      transition: $transition;
      @include transform-origin(top, left);
    }
    
    .header-search-form {
      float: none;
      position: absolute;
      top: 15px;
      padding: 0;
      left: 141px;
      transition: $transition;
    }
    
    .header-nav {
      float: none;
      position: absolute;
      top: 50px;
      left: 141px;
      transition: $transition;
    }
    
    &.narrow {
      position: fixed;
      height: 60px;
      
      .logo {
        top: 5px;
        @include transform(scale(0.85));
      }
      
      .header-search-form {
        //left: 122px;
      }
      
      .header-nav {
        opacity: 0;
      }
    }
  }
  
  // Make location dropdown and autocomplete positioned according to the header again
  #dropper, 
  .autocomplete_choices {
    position: fixed !important;
    top: 40px !important;
  }
}

SassMeister-output.css

.logged-in #wrap{padding-top:76px;overflow:hidden}.logged-in .biz-details .top-shelf{overflow:visible}.logged-in .header-top-addons{display:none}.logged-in .header-container{position:relative}.logged-in .app-header{position:fixed;top:0;width:100%;height:76px;transition:all 0.5s ease}.logged-in .app-header .logo{float:none;position:absolute;top:9px;margin:0;transition:all 0.5s ease;-moz-transform-origin:top left;-ms-transform-origin:top left;-webkit-transform-origin:top left;transform-origin:top left}.logged-in .app-header .header-search-form{float:none;position:absolute;top:15px;padding:0;left:141px;transition:all 0.5s ease}.logged-in .app-header .header-nav{float:none;position:absolute;top:50px;left:141px;transition:all 0.5s ease}.logged-in .app-header.narrow{position:fixed;height:60px}.logged-in .app-header.narrow .logo{top:5px;-moz-transform:scale(0.85);-ms-transform:scale(0.85);-webkit-transform:scale(0.85);transform:scale(0.85)}.logged-in .app-header.narrow .header-nav{opacity:0}.logged-in #dropper,.logged-in .autocomplete_choices{position:fixed !important;top:40px !important}