Image information displayed when centering the image while scrolling

I have the following problem:

I want the image related headers in a div to be displayed while scrolling through my tumblr blog. So far I have enclosed the following code and managed to get it to work:

script I used:

Fiddle

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#captionposition').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#captionposition').html($(this).find('.tags').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

      

        
        
        
      

    

My blog

I'm not sure how exactly the "top" is defined, but it turns out to be quite confusing for the viewer as there are no "pauses" between the headers and the div appears to pop up, although the image is not even fully visible in the window. Plus, if two or even more images appear at the same time, which are unknown what the information refers to.

What would I be aiming for?

I would like to have a div with information only visible for the image, fully centered. center +/- 10% would be enough I think (but would like to play around with this if possible). And a fairly smooth fade-in / out animation would be great too.

I am very grateful in advance if anyone can help me!

source:

{block:Photo}


            <li class="post photo">

                    <ul class="post-data">
                        {block:IfPhotoIconImage}<li class="icon"></li>{/block:IfPhotoIconImage}
                        <li class="info"></li>
                    </ul>

                <div class="post-content">
                    <div class="content-img-wrapper">{LinkOpenTag}<img src="{PhotoURL-1280}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
                    {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                    </div>

                    {block:HasTags}
                    <ul class="tags" style="display: none;">
                        {block:Tags}
                        <li><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;</li>   
                        {/block:Tags}
                    </ul>
                    {/block:HasTags}                        

            </li>


            {/block:Photo}

<div id='captionposition'></div>

      

        
        
        
      

    

ok so this is what worked well for me (check iris post for further explanations):

$(window).load(function () {

var window_center = $(window).height()/2;
var threshold = 0;

    $(window).on("scroll resize", function () {
        scroll = $(window).scrollTop();
        //var pos = $('#captionposition').offset();

        $('.post').each(function () {
        var post_center = $(this).height()/2 + $(this).offset().top;

            if (post_center + threshold < window_center + scroll ||
                post_center - threshold < window_center + scroll) {

            if (!$(this).hasClass('active')){
                $('.post').removeClass('active');
                $(this).addClass('active');
                $( "#captionposition" ).hide();
                $( "#captionposition").html($(this).find('.caption').text());  
                $( "#captionposition" ).fadeIn('slow');

            }
                return; //break the loop
            }

        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

</script>