Question

Based on this awnser: How can I determine the direction of a jQuery scroll event?

I did a function like this:

tempScrollTop=0;
$.fn.cool = function(options){
    windowTop = $(window).scrollTop(); 

    if (tempScrollTop < windowTop ){
        //scroll down
    }
    else if (tempScrollTop > windowTop ){
        //scroll up
    }

    tempScrollTop = windowTop;
};

but each time I try to use my function

 $(window).scroll(function(e) {
    $("#element1").cool();
    $("#element2").cool();
 }

$(“#element2”) takes the global variable tempScrollTop already modified by $(“#element1”) and for element 2 tempScrollTop and windowTop has the same value, so my function doesn’t work.

Any ideas on what can I do? I dont want to create n functions one for each element.

Answer 1

It seems that what you actually want to do is:

$("#element1","#element2").cool();

Then in your cool function:

tempScrollTop=0;
$.fn.cool = function(options){
windowTop = $(window).scrollTop(); 

if (tempScrollTop < windowTop ){
    //scroll down
    this.each(function() {
        // do stuff with each selected element $(this)
    });
}
else if (tempScrollTop > windowTop ){
    //scroll down
    this.each(function() {
        // do stuff with each selected element $(this)
    });
}

tempScrollTop = windowTop;
};

More info on plugin authoring here.

Another way would be to separate the scroll calculation from the action on the elements:

$(window).scroll(function(e) {
    var scrollDiff=calculateScroll();
    $("#element1").cool(scrollDiff);
    $("#element2").cool(scrollDiff);
}