CODEWITHSUNDEEP
javascriptjquerycssfade
Gerard van den Bosch
Gerard van den Bosch

Reputation: 509

div fade out inner div elements

I came accross the following fiddle which let elements fade out of the document 1 by 1 as they reach the top.

By executing javascript:

$(window).scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $(window).scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/JdbhV/6/

Only this is working on the full window, I want it to work on a div tag. So I modified the fiddle to add the div test and all other divs inside there, then modify the javascript to grab the div instead of the window:

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $("#test").scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/JdbhV/1692/

But now they fade too fast and not when they reach the top of the div.

Does someone have a pointer what is going wrong here?

Upvotes: 3

Views: 329

Answers (4)

Tim Cosmo
Tim Cosmo

Reputation: 66

Here are the jsfiddle example.

You just need to change the condition from

$(this).offset().top - $("#test").scrollTop()) < 20

To

$(this).offset().top < $("#test").offset().top

$("#test").offset().top is the height that determine when to do the fade action.
For now that is the top of the container #test.

Upvotes: 0

Mo Shen
Mo Shen

Reputation: 83

The reason is that jQuery turns the divs transparent. However the divs are still there, which means their height still counts.

So, in particular for this case, the only thing you need is the subtraction. Using 20 minus the height of divs (which is 100px) and spaces between divs (which is 100px as well), you have 200px in total for each div (and the space around it).

Try the code below, and see if it works.

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

Good luck.

Upvotes: 1

CaTs
CaTs

Reputation: 1323

The .offset() method allows us to retrieve the current position of an element relative to the document.

Scrolling the window doesn't change the position of elements in the document however scrolling elements inside another element does. This causes the offset position to change which throws off the check to see if box is at the top of the scroll view.

Try using the .position() method which gets the position relative to the parent.

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
            //When the top of the square goes above the top of the scroll element, fade it out
        if ($(this).position().top < 0) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/ys0m6axL/

Upvotes: 1

tejashsoni111
tejashsoni111

Reputation: 1405

Try with using div top instead scrollTop in the calculation.

I have changed the calculation in this line : 

if (($(this).offset().top - $("#test").offset().top) < 20) {

JSFIDDLE : http://jsfiddle.net/JdbhV/1697/

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
          if (($(this).offset().top - $("#test").offset().top) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

Upvotes: 0

Related Questions