CODEWITHSUNDEEP
javascriptjquerycss
daugaard47
daugaard47

Reputation: 1868

Nav opacity start at 0 on page load

I trying to hide my navigation by opacity in the css, then have the nav fade in around 600px down the page.

I have everything working except.... When I load the page the nav bar starts at full opacity (1).

Once I scroll down a pixel it works as it should. i.e the nav opacity returns to (0) then at 600px the nav opacity returns to (1).

If someone could help me out on this I would appreciate it.

Here is a fiddle http://jsfiddle.net/daugaard47/FpPTm/ .

Press run then scroll down the page to see the effect.

Here is my script if you want to check it out real quick.

        $(window).bind('scroll', 'load', function(){
        var                 
            navwrap = $('.navwrap'),
            scrollTop = $(document).scrollTop(),
            limit = 635;
       if (scrollTop >= limit) {
           navwrap.addClass('sticky');

       } else if (scrollTop <= limit) {
           navwrap.removeClass('sticky');              
       }
    });

Thanks in advance if anyone can help me out.

Upvotes: 1

Views: 140

Answers (1)

dev
dev

Reputation: 4009

It looks like as the nav has already got the class sticky added when the page first loads it is already applying opacity:1. And then when scrolling down 1px it then removes this.

Updated JSFIDDLE without the sticky class at loadup

<div class="navwrap">
    <div id="nav">NAVIGATION</div>
</div>

I'm not sure if you need the sticky class at loadup but removing it looks to do the job.

Upvotes: 1

Related Questions