CODEWITHSUNDEEP
javascriptjquerycssanimation
fender967
fender967

Reputation: 285

jQuery addClass based on how far scrolled

I have written some jquery to calculate the height of 4 elements by css class and get their height, then compare the height to how far the page has been scrolled. If the page has been scrolled to or past each element then a css class is added which animates the element.

The problem that I am having is that the jquery is adding the classes to all of the elements as soon as the page is scrolled to the first element, instead of adding the class to each as it is scrolled to.

What is wrong with my jquery that it is doing this?

Here is the jsfiddle http://jsfiddle.net/94kP6/7/

This is the jquery part of the code

// element animation scroll detection
(function ($, document, undefined) {
    var animation1 = $('.animation1').height();
    var animation2 = $('.animation2').height();
    var animation3 = $('.animation3').height();
    var animation4 = $('.animation4').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= (animation1)){
        $('.animation1').addClass("animate-from-left");
        }
        if(winTop >= (animation2)){
        $('.animation2').addClass("animate-from-right");
        }
        if(winTop >= (animation3)){
        $('.animation3').addClass("animate-from-left");
        }
        if(winTop >= (animation4)){
        $('.animation4').addClass("animate-from-right");
        }
    });
})(jQuery, document);

Upvotes: 2

Views: 746

Answers (2)

ntgCleaner
ntgCleaner

Reputation: 5985

Here's a fiddle to show you need to use .offset().top instead of .height

http://jsfiddle.net/94kP6/10/

When you use height, you are asking the scroll to wait until the height of the object instead of waiting for the top position of the object

Just change your heights to offsets

UPDATE http://jsfiddle.net/94kP6/14/ This makes it so the animation can be seen more in the middle of the screen. Just subtract a specified height (in this case, the height of the object) from the offset and it will animate at a higher scrollTop.

You can also do the same thing, only backwards by ADDING a specified amount to the var winTop = $(window).scrollTop(); line, line this: var winTop = $(window).scrollTop() + 250;

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77996

var animation1 = $('.animation1').height();
var animation2 = $('.animation2').height();
var animation3 = $('.animation3').height();
var animation4 = $('.animation4').height();

needs to be

var animation1 = $('.animation1').offset().top;
var animation2 = $('.animation2').offset().top;
var animation3 = $('.animation3').offset().top;
var animation4 = $('.animation4').offset().top;

or some variant for personal preference, like this: 

var animation1 = $('.animation1').position().top - $('.animation1').height();
var animation2 = $('.animation2').position().top - $('.animation2').height();
var animation3 = $('.animation3').position().top - $('.animation3').height();
var animation4 = $('.animation4').position().top - $('.animation4').height();

Upvotes: 2

Related Questions