CODEWITHSUNDEEP
jqueryjquery-waypointsjquery-transit
JimmyJammed
JimmyJammed

Reputation: 9698

jQuery Waypoints - How to fire action everytime the page is scrolled and the element is in view?

I have an object that I want to spin whenever the user scrolls the page and that object is currently in view.

So if my object is right in the middle of the page when the site is first loaded, I want it to spin "right" when the user scrolls down. When the user scrolls up, it will spin "left".

I can't figure out how to make it spin whenever the object is in view, not just when the top of the view is hit with the object. I am using jQuery Waypoint to detect scrolling, and jQuery Transit to animate my object. :

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
});

Upvotes: 2

Views: 1618

Answers (2)

imakewebthings
imakewebthings

Reputation: 3398

This is what the offset option in Waypoints is used for. If you want the whole element to be in view (at the bottom of the viewport) you can use the value "bottom-in-view":

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
}, {
    offset: "bottom-in-view"
});

Upvotes: 1

user3393142
user3393142

Reputation:

Don't have much experience with Waypoints but.. you could do something like this...

var win_height = $(window).height();
    var spinner_position = $('#home-spinner')

$(window).on('scroll', function() {
    var current_position = $(document).scrollTop();
    if (current_position >= spinner_position && current_position < spinner_position + win_height) {
        // spin it here
    };
});

You'll probably want to store the previous location on the page & compare current_position to it to determine the direction in which the user is scrolling. Likewise, you'll want to have vars like win_height be re-evaluated on re-size. I'm sure you'll figure out how to use it with your plugins.

Upvotes: 0

Related Questions