CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rasmusdt
Rasmusdt

Reputation: 1

Changing a div's opacity when the user scrolls

I'm making a website and I want the header (named floatHeader in my code) to be invisible at the start and then becomes visible once you start to scroll. I have tried my best to do it with JQuery but I'm not very experienced, so any advice would be much appreciated. Here is the current code that I have.

$(window).scroll(function () {
    if ($(window).scrollTop() > 10) { 
        $('.floatHeader').css("opacity", 1);
    }
    else{
        $('.floatHeader').css("opacity", 0);
    }
});

Upvotes: 0

Views: 224

Answers (4)

Deepak Arora
Deepak Arora

Reputation: 440

You have missed adding jquery in your fiddle code. So add jquery file in your code in tag like this.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Also If you want the header to be invisible at start then set the "style:display:none;" in your header. This will hide your header at start.

<div class="header" style="display:none"></div>

Here is the updated fiddle.

Upvotes: 0

user3270303
user3270303

Reputation:

I will suggest you to use the jquery plugin.

here is the link: http://stickyjs.com/

Upvotes: 0

Karim AG
Karim AG

Reputation: 2193

Your code is working fine. You just need to include jQuery to your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Here is your fiddle.

Upvotes: 5

Rohan Kumar
Rohan Kumar

Reputation: 40639

You missed to load any version of jquery

Working Demo

Upvotes: 1

Related Questions