title: Code works on Codepen, but not JSFiddle or HTML page
body: <p>I have a banner that I want to blur as you scroll, and I found a code. I edited it, and it looks beautiful in Codepen, but it doesn't work in JSFiddle or on my HTML page. I'll post the links for each of them below.
  I'm probably just doing something wrong, but help would really be appreciated.</p>
  
  <p>Codepen (working): <a href="http://codepen.io/theinvadingdingo/pen/MwmwrM" rel="nofollow">http://codepen.io/theinvadingdingo/pen/MwmwrM</a>
  JSFiddle (not working): <a href="https://jsfiddle.net/mn7p1451/" rel="nofollow">https://jsfiddle.net/mn7p1451/</a></p>
  
  <p>If you need it, here are the codes I'm using for HTML, CSS, and Javascript:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="content"&gt;
          &lt;hgroup&gt;
               &lt;h1&gt;Wolf Valley&lt;/h1&gt;
          &lt;/hgroup&gt;
      &lt;/div&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="site"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@import"bourbon";
   @import url(http://fonts.googleapis.com/css?family=Lato);
   html, body {
      padding: 0;
      margin: 0;
      height: 100%;
  }
  html {
      font: 1em/1.5"Lato", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizelegibility;
  }
  body {
      font-size: 1.3em;
  }
  header {
      height: 100%;
      position: relative;
      overflow: hidden;
      background: url(http://s6.postimg.org/j8n8hawrl/Flower.png) center no-repeat;
      /* Image Credit: Unsplash.me */
      background-size: cover;
      .content {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
      }
      h1, h2 {
          margin: 0;
      }
      h2 {
          text-transform: uppercase;
          margin-top: -.5em;
      }
      hgroup {
          @include transform(translate(-50%, -50%));
          display: inline-block;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          color: #fff;
          border: 5px solid #fff;
          padding: .5em 3em;
          background-color: rgba(0, 0, 0, .2);
          z-index: 2;
      }
      .overlay {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          background: url(http://s6.postimg.org/6sqink3fl/Flower_Blur.png) center no-repeat;
          background-size: cover;
          z-index: 0;
          opacity: 0;
      }
  }
  .site {
      padding: 20em 0;
      text-align: center;
      background-color: #efefef;
      font-size: .8em;
      color: #444;
      a {
          color: #666;
          text-decoration: none;
          &amp;:hover {
              color: #222;
          }
      }
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>/**
   * Cache
   */
  var $content = $('header .content'),
      $blur = $('header .overlay'),
      wHeight = $(window).height();
  
  $(window).on('resize', function () {
      wHeight = $(window).height();
  });
  
  /**
   * requestAnimationFrame Shim 
   */
  window.requestAnimFrame = (function () {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
          window.setTimeout(callback, 1000 / 60);
      };
  })();
  
  /**
   * Scroller
   */
  function Scroller() {
      this.latestKnownScrollY = 0;
      this.ticking = false;
  }
  
  Scroller.prototype = {
      /**
       * Initialize
       */
      init: function () {
          window.addEventListener('scroll', this.onScroll.bind(this), false);
      },
  
      /**
       * Capture Scroll
       */
      onScroll: function () {
          this.latestKnownScrollY = window.scrollY;
          this.requestTick();
      },
  
      /**
       * Request a Tick
       */
      requestTick: function () {
          if (!this.ticking) {
              window.requestAnimFrame(this.update.bind(this));
          }
          this.ticking = true;
      },
  
      /**
       * Update.
       */
      update: function () {
          var currentScrollY = this.latestKnownScrollY;
          this.ticking = false;
  
          /**
           * Do The Dirty Work Here
           */
          var slowScroll = currentScrollY / 4,
              blurScroll = currentScrollY * 2;
  
          $content.css({
              'transform': 'translateY(-' + slowScroll + 'px)',
                  '-moz-transform': 'translateY(-' + slowScroll + 'px)',
                  '-webkit-transform': 'translateY(-' + slowScroll + 'px)'
          });
  
          $blur.css({
              'opacity': blurScroll / wHeight
          });
      }
  };
  
  /**
   * Attach!
   */
  var scroller = new Scroller();
  scroller.init();
  </code></pre>