fade up if < Xpx , fade down if > Xpx

[roughRabbit]

This works for my first button but the next ones fade up - but if I scroll back up only the first one disappears; the next remains.

 

 $(window).scroll(function() {

            if ($(this).scrollTop() > 400) {

                TweenLite.to("#dellie", .5, {

                    opacity: 1,

                    display: "block",

                    ease: Back.easeOut

                });

            } else {

                TweenLite.to("#dellie", .5, {

                    opacity: 0,

                    display: "none",

                    ease: Back.easeOut

                });

            }

             });

 

 

        /*#dellie1*/

        $(window).scroll(function() {

            if ($(this).scrollTop() > 800) {

                TweenLite.to("#dellie1", .5, {

                    opacity: 1,

                    display: "block",

                    ease: Back.easeOut

                });

            } else {

                TweenLite.to(".#dellie1", .5, {

                    opacity: 0,

                    display: "none",

                    ease: Back.easeOut

                });

            }

             });

 

I tried naming the functions differently, but that didn't seem to work.

 

 

I've made a codepen at

See the Pen Kvkdf by anon (@anon) on CodePen

- but don't know how to make  the screen  big enough to scroll and thus show the animation...

[Rodrigo]

Hi and thanks for providing the codepen, it's always very helpful!!.

 

Just a syntax error, you're creating a class-ID selector here:

 

TweenLite.to(".#dellie1",.5, {opacity: 0,display: "none",ease: Back.easeOut});

 

That's throwing an error. If you change your code to this:

TweenLite.to("#dellie1", .5, {
                    opacity: 0,
                    display: "none",
                    ease: Back.easeOut
                });

It works as expected.

 

Rodrigo.

[roughRabbit]

Duuh!  Thanks, I  was

pulling my hair out...