CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bouzaid
Bouzaid

Reputation: 66

fading out a div in relation to yOffset Position

I want to fade out a Div in relation to The scroll When I Scroll Down the opacity fades out and when when I scroll up it fades back in

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>

and nothing happened Can anyone here tell me Where's the problem ?

Upvotes: 0

Views: 275

Answers (1)

Ali Elzoheiry
Ali Elzoheiry

Reputation: 1682

You have a few problems i fixed here http://jsfiddle.net/8c2dg7nj/1/

1- you were using an uninitialized variable hero, you were using the wrong name 

hero = document.getElementById('hero');

instead of 

pagetop = document.getElementById('hero');

2- Id is case sensetive so id="hero" not "Hero"

3-you were never calling your javascript function. I added a call on scroll 

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

Upvotes: 2

Related Questions