滚动时图像居中显示图像相关信息

Question

我有以下问题：

我希望在 div 中滚动浏览我的 tumblr 博客时显示与图片相关的说明。到目前为止，我嵌入了以下代码并设法让它工作：

我使用的脚本：

$(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

我不确定 "top" 是如何定义的，但事实证明这让观众感到很困惑，因为字幕之间没有 "pause"，而且 div 似乎很流行尽管图像在 window 中甚至不完全可见。另外，如果同时出现两个或更多图像，则不确定信息属于哪个。

我的目标是什么？

我希望 div 的信息仅对完全居中的图像可见。我猜 center +/- 10% 就足够了（但如果可能的话我想尝试一下）。相当平滑的淡入淡出 in/out 动画也很棒。

如果有人能帮助我，我非常感谢！

原码：

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

好的，这对我来说效果很好（查看 iris post 以获得进一步的解释）：

$(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

好的，我做了一个Demo可以帮助你。

$(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
});
});

要知道的事情：

我使用 $(window).scrollTop() 作为参考，所以我们知道它滚动了多少。
添加了一个阈值变量，以设置您想要的 +/- 百分比。
脚本计算 window 的中心和每个 .post.

滚动时图像居中显示图像相关信息

image related info showing while image centered when scrolling

javascript

jquery

scroll

fade