Javascript 代码可以在Codepen上工作，但不能在JSFIDLE或HTML页面上工作

我有一个横幅，我想模糊你滚动，我发现了一个代码。我编辑了它，它在Codepen中看起来很漂亮，但在JSFIDLE或我的HTML页面中不起作用。我将在下面发布他们每个人的链接。 我可能只是做错了什么，但我真的很感激你的帮助

代码笔（工作）： JSFIDLE（不工作）：

如果您需要，以下是我用于HTML、CSS和Javascript的代码：

HTML

<header>
    <div class="content">
        <hgroup>
             <h1>Wolf Valley</h1>
        </hgroup>
    </div>
    <div class="overlay"></div>
</header>
<div class="site"></div>

JavaScript

/**
 * 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();

---

查看您的JavaScript控制台。认真地如果你的JS不工作：阅读浏览器给你的错误

当它工作时，您已经加载了jQuery：

当它不起作用时，您没有：

---

---

如果您使用库，请确保加载该库

您的CSS无效，据我所知，您不能这样做

header{
//css here
    .a{
    //more css here
    }
}

你必须这样做

header{
//css
}


header.a{
//css
}

---

您在编写css后没有关闭标题部分…请参阅下面的代码。请查收

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;

}//NOT CLOSED IN JSFIDDLE
    .content {

---

你没有把jQuery包括在提琴中。你在代码笔中使用了SCS，但没有在提琴中使用。我完全没有注意到这一点！奇怪，因为它在我复制/粘贴之前工作。。。无论如何，谢谢！（JS仍然不起作用，但我正在想办法。）我认为在控制台中显示$notdefined。我认为js没有被调用。你能分享这个网址吗？如果你不介意的话，你能分享这个网址来检查这个问题吗？我都弄明白了！昨晚我花了几个小时来解决这些问题。不管是谁，如果你想看的话，这是成品：

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;

}//NOT CLOSED IN JSFIDDLE
    .content {