Search code examples
jqueryscrolltopfadeto

FadeTo() bei scrollTop

<script>      
    $(window).scroll(function(){
        var fromTopPx = 717; // distance to trigger
        var scrolledFromtop = $(window).scrollTop();
        if(scrolledFromtop > fromTopPx){
            $("#farbe").fadeTo("slow", 0 );
        }else{
            $("#farbe").fadeTo("slow", 1 );

        }
    });

</script>

Hi, I have a fixed div that should not be displayed by default. If you go down 717px from the top, it should fade in. If you go back to the top, it should fade out.

What am I doing wrong?

Solution

  • Use this function, it's a lot cleaner.

    $(window).bind("scroll", function() {
    if ($(this).scrollTop() > 717) {
        $("#farbe").fadeIn();
    } else {
        $("#farbe").stop().fadeOut();
    }
});

    Dont forget to add the CSS: #farbe{display: none;} so it's hidden by default.

    DEMO