image related info showing while image centered when scrolling

Question

I have the following problem:

I want image related captions in a div to show up while scrolling through my tumblr blog. So far I embedded the following code and managed to get it 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 am not sure how exactly "top" is defined, but it turned out being quite confusing for the viewer as there's no "pause" inbetween the captions and the div seems to pop up eventhough the image is not even fully visible in the window. Plus if two or even more images show up at the same time it's uncertain to which the info belongs.

What would I aim for?

I would love to have the div with the informations only visible for the image fully centered. center +/- 10% would be enough I guess (but would like to play around with this if possible). And a rather smooth fade in/out animation would be great as well.

I am super thankful in advance if anybody can help me!

original code:

{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>

okay, 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> 

Answer 1

Ok I made a Demo that could help you.

$(window).load(function () {
var window_center = $(window).height()/2;
var threshold = 0;
$(window).on("scroll resize", function () {
    scroll = $(window).scrollTop();

    $('.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();
                var newDescr = $(this).find('.tags');
                $('#captionposition').html(newDescr.html());    
                $('#captionposition').fadeIn('slow');
            }
        }
    });
});

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

Things to know:

1. I used $(window).scrollTop() as reference, so we know how much it's scrolled.
2. Added a Threshold variable, to set the +/- percent you wanted.
3. The scripts calculates the center of window and center of each .post.