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 = document.getElementById('hero');

而不是

pagetop = document.getElementById('hero');

2- Id是案例性的，所以id =＆＃34;英雄＆＃34;不是＆＃34;英雄＆＃34;

3 - 你从未调用过你的javascript函数。我在滚动

上添加了一个调用

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

淡出与yOffset位置相关的div

1 个答案: