相对于yOffset位置淡出div

Question

我想淡出与“滚动”相关的Div向下滚动时，不透明度淡出，向上滚动时，不透明度淡入

CSS：

.HeroImg{
    margin-top: 100px;
    height: 414px;
    position: fixed;
    width: 100%;}

#hero{
    opacity: 1;
}

HTML：

<div class="HeroImg" id="Hero">
    <h1>Exemple</h1>
    <h2>Exemple</h2>
</div>

JavaScript：

<script>
        var hero, yPos;
        function yScroll() {
            pagetop = document.getElementById('hero');
            yPos = window.pageYOffset;
            if (yPos > 150) {
                hero.style.opacity = "0";
            } else {
                hero.style.opacity = "1";
            }

        };
</script>

什么都没发生，这里有人可以告诉我问题出在哪里吗？

Answer 1

您在这里解决了一些问题http://jsfiddle.net/8c2dg7nj/1/

1-您使用的是未初始化的变量Hero，您使用的名称错误

hero = document.getElementById('hero');

代替

pagetop = document.getElementById('hero');

2- ID区分大小写，因此id =“ hero”而不是“ Hero”

3-您从未调用过JavaScript函数。 我在滚动条上添加了通话

$(document).on('scroll', function(){
    yScroll();
})