Search code examples
javascriptjqueryscrollto

Scroll with 'magnetic' effect (jquery)

Is there a way to detect properly if an element is actually on the 'focus' of the scroll...I mean a kind of 'user is now at this element position'?

It would be a kind of comparaison between element.offset().top and $(window).scrollTop(); ?

I found this effect on this site (http://andrewgooch.com/mercury-music-awards-2013) and I was ask myself how this could work properly in any device/resolution

Solution

  • He's using:

    var articles = $('article');

// Find next
function findnext(){
    var scrollPosition = $(window).scrollTop();
    articles.each(function() {
        var that = $(this);
        artPosition = that.offset().top;
        if (artPosition > scrollPosition + 10) {
            target = that;
            $.scrollTo(target, 400, {axis:'y', easing:'easeInOutQuart'});
            return false;
        }
    });
}

    etc check the source code