jQuery - 滚动到它时更改元素的不透明度

Question

我希望每个div .project在您到达时淡入（并且如果您在同一位置重新加载页面，也会使其淡入）。我有下面的代码，但它不能正常工作，滚动经过第二个div时有点错误。

var ticks = 0;
var scrolled = false;
$.each($(".project"), function(index, value) {
    ticks = ticks + 500;
    var elem = $(this);
    setTimeout(function() {
        var element_position = elem.offset().top;
            var screen_height = $(window).height();
            var activation_offset = 0.5;
            var activation_point = element_position - (screen_height * activation_offset);
            var max_scroll_height = $('body').height() - screen_height - 5;

            $(window).on('scroll', function() {
                scrolled = true;
                if(scrolled) {
                    var y_scroll_pos = window.pageYOffset;

                    var element_in_view = y_scroll_pos > activation_point;
                    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

                    if(element_in_view || has_reached_bottom_of_page) {
                        elem.animate({
                            opacity: 1
                        });
                    }
                }
            });
    }, ticks);
});

if(!scrolled && $(document).scrollTop() >= 1) {
      setTimeout(function() {
      $(".project").animate({
            opacity: 1
        });
      }, 250);
}

我如何实现目标？