Fadein as the browser descends

Question

I’m having a little problem, I think it’s more logical. Here’s what I’m trying to do when I’m rolling the site down.

$(function(){
    $(window).scroll(function () {
      if ($(window).scrollTop() >= $(".j_show").offset().top) {
        $(".j_show").each(function () {
        $(this).delay("1000").fadeIn("2000");
      });
    }
});
});

The . j_show class is content, and the various contents with that class. The problem is that when ($(window).scrollTop() >= $(".j_show").offset().top) comes at the time it’s for fadeIn, gives, more appears is all that are with the class, and no and that I want, I want the fadeIn run content by content depending on height.

ps: I tried without the function each, more logically than in the same.

# help

Answer 1

Try that logic.

   $('.j_show').each(function(){
        var fade = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
        if (fade < topOfWindow + 650) {
            $(this).delay(1000).fadeIn(2000);
        }
    });