Question

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

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不起作用：请阅读浏览器为您提供的错误。

$ not defined

当它工作时，你加载了jQuery：

jQuery loaded

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

jQuery not loaded

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

Answer 2

您的CSS无效，只要我知道您无法执行此操作

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

你必须这样做

header{
//css
}


header.a{
//css
}

Answer 3

编写css后你没有关闭标题部分...见下面的代码。请检查

$(function() {
    $('#myButton').on('click', function() {
        var text = $('input[name=somename]').val();
        var chkd = $('input:checkbox:checked');
        var vals = chkd.map(function() {
            return this.value;
         })
        .get().join(', ');
        alert("Name: " + text + "\n" + "Checkbox: " + vals );
    });
});

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

3 个答案: