Javascript 使用角度JS 1滚动时取消模糊图像

我尝试使用Angular JS 1创建这种效果，当你滚动div的背景图像时，背景图像会从模糊变为清晰。我已经使用基本的HTML、CSS和JS完成了这项工作，并且我已经了解到可以在angular应用程序中使用简单的JS函数。我以前的代码是这样的：

HTML:

JS:

我在WAMP服务器上测试了它，但图像甚至没有显示出来。然后我试着把它放到Github页面上。图像确实显示了，但高度只有在文本“Hello”之前。我希望它是完全100%的浏览器窗口，所以我用高度100%的CSS。请帮忙！谢谢

<div class="intro">
   <div class="img-src"></div>
   <div class="img-src scroll-img"></div>
   Hello
</div>

html,body{
    height: 100%;
.intro{
    position: relative;
    height: 100%;
}
.img-src{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('../assets/cover-image-blur.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -10;
    background-color: #222;
}
.scroll-img{
    background-image: url('../assets/cover-image.png');
    background-size: cover;
    opacity: -0.006677;
}

(function () {
    $(window).scroll(function () {
        var oVal;
        oVal = $(window).scrollTop() / 240;
        return $('.scroll-img').css('opacity', oVal);
    });
}.call(this));