CODEWITHSUNDEEP
javascriptjquery
Antoposse
Antoposse

Reputation: 19

How to use javascript fadeIn

I have this javascript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).scroll(function() {
        $('#menu-fixed').toggle($(this).scrollTop() > 100 );
    });
</script>

I want to add a "fadeIn" effect but it is not working.

Upvotes: 2

Views: 87

Answers (2)

Antoposse
Antoposse

Reputation: 19

I write this but I dont know if is correct....

<script type="text/javascript">
    $(document).scroll(function() {
    if($(this).scrollTop() > 100){
       $('#menu-fixed').fadeIn(500);
    }
    else{
        if($(this).scrollTop() < 100) {
         $('#menu-fixed').fadeOut(500);
        }
    }   
});
</script>

Upvotes: -1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

You were really close, you just had to put the boolean passed to toggle in a conditional then execute the fade if true.

$(document).scroll(function() {
    if($(this).scrollTop() > 100){
       $('#menu-fixed').fadeIn(500);
    }
});

Working Example http://jsfiddle.net/DfxtL/1/

Upvotes: 3

Related Questions