当滚动到达div的顶部时如何打印scrolltop（）值0

Question

I have 5 div's on the same page. All div's have same class name 'post' and same height '600px'. So what I want is when I scroll any div among 5 div and when it reaches to the top of the div it should alert the value 0.

Trouble is When I scroll div2, div3, div4, div5 to the top. It did not print value '0'. But when I scroll div1 to the top and then if I scroll any other div's it shows '0'. I need to print '0' no matter which div I am scrolling first. Why is it happening. See the comment section for jsfiddle code. thanks in advance.

Demo

$("window").load()
{
    $('.post').scrollTop($('.post').height())  
} 

$('.post').scroll(function() {
    if($('.post').scrollTop()==0)
    {
        alert('0');
    }
});

jsfiddle

Answer 1

Change

if($('.post').scrollTop()==0)
{
    alert('0');
}

to

if($(this).scrollTop()==0)
{
    alert('0');
}

$('.post').scrollTop() will give the value of the first div (first found element). If the value of the first div is 0, $('.post').scrollTop() == 0 will be always true , even though you're scrolling other div .

Answer 2

You are always selecting first div. This is why you are getting that result.

In this code:

if($('.post').scrollTop()==0)
{
    alert('0');
}

$('.post').scrollTop() will return first found element.

Try this:

$('.post').scroll(function() {

    $('.post').each(function() {
        if($(this).scrollTop()==0)
        {
            alert('0');
        }
    });
});

Answer 3

Wrap your post divs in a parent, and iterate through children. Then use this keyword to identify which child div you're scrolling:

$('#allPosts').children().scroll(function () {
    if ($(this).scrollTop() === 0) {
        alert('0');
    }
});

Answer 4

All you need is:

$(".post").scroll(function () {
    if ($(this).scrollTop() == 0) {
        alert('0');
    }
});

Fiddle: http://jsfiddle.net/052xntw9/19/

This will attach an event listener to each div, and the $(this) refers specifically to that div (instead of the first div).