CODEWITHSUNDEEP
jqueryjquery-animate
amandabeau
amandabeau

Reputation: 43

element to animate on scroll up, reverse on scroll down

I'm trying to do something that I'm sure is quite simple...I'm slowly teaching myself JQuery, so I've been reading forums and Googling different terms all day, but I can't seem to make it happen!

I need the image of the sign to slide left (out of view) when the following div scrolls up (no problem)...but, I'd like the action to reverse when the user scrolls back down.

This fiddle achieves the initial animation: http://jsfiddle.net/fr2Sw/

I've tried a whole bunch of methods that aren't working...functions like this:

var canSee = false;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#box").animate({left:"-=200px"});
        canSee = true;
    } else if (!canSee) {
        $("#box").animate({left:"=0px"});
    }
});

Thank you so much, any help is much appreciated! If you don't mind, please explain what's happening in each function "in english" if you can :o)

Upvotes: 2

Views: 5589

Answers (2)

tjb1982
tjb1982

Reputation: 2259

Maybe something like this: 

var canSee = true;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100 && canSee) {
        $("#box").animate({left:"-=200px"});
        canSee = false;
    } else if ($(this).scrollTop() <= 100 && !canSee) {
        $("#box").animate({left:"+=200px"});
        canSee = true;
    }
});

Initialize casSee to true, because the user can see the image. When the user scrolls, do the following:

If the Windows's scrollTop is over 100 and the image is still visible, hide it by sliding it left out of the screen, so it only happens once--it will never scroll beyond 200px. When the user scrolls back up, if the image is out of the viewport and canSee is set to false, slide the image back in and set canSee to true, because the user can see it.

Upvotes: 4

HugoLemos
HugoLemos

Reputation: 473

If you want show the image only when the scroll is on the top, use this:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() === 0) {
            $("#box").animate({
                left: "0px"
            });
        } else if ($("#box").css("left") == "0px") {
            $("#box").animate({
                left: -$("#box").width()
            });
        }
    });
});

Upvotes: 1

Related Questions