代码适用于 Codepen，但不适用于 JSFiddle 或 HTML 页面

Question

我有一个横幅，我想在您滚动时模糊它，我找到了一个代码。我编辑了它，它在 Codepen 中看起来很漂亮，但它在 JSFiddle 或我的 HTML 页面上不起作用。我将在下面 post 每个链接。我可能只是做错了什么，但真的很感激帮助。

Codepen（工作）：http://codepen.io/theinvadingdingo/pen/MwmwrM JSFiddle（不工作）：https://jsfiddle.net/mn7p1451/

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

HTML

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

CSS

@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;
        &:hover {
            color: #222;
        }
    }
}

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

Answer 1

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

运行时，您已加载 jQuery:

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

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

Answer 2

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

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

你必须做

header{
//css
}


header.a{
//css
}

Answer 3

您在写完 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 {

代码适用于 Codepen，但不适用于 JSFiddle 或 HTML 页面

Code works on Codepen, but not JSFiddle or HTML page

javascript

jquery

html

css

jsfiddle