How to show a div when I scroll down on an ID in jQuery?

Question

I've found a solution how to show (fade in) a DIV when I scroll down an amount of pixels, let's say 400px from the top, but how to show a DIV when I scroll down on a DIV with a specific ID? (the thing is that I don't know the height of DIVs, so that's why I am trying to implement this functionality based on IDs)

Thank you

Answer 1

Check a offset position of the element with ID and apply you example where replace static value (400px) by value from the offset.

Example:

$(window).scroll(function(){
    if($(this).scrollTop() >= $('#selector').offset().top) {
      $('#hidden').show();
    }
});