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

Question

我有以下问题:

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

我使用的脚本:

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

我不确定“top”到底是如何定义的，但事实证明这让观众感到很困惑，因为标题之间没有“暂停”，而且 div 似乎会弹出，即使图像在 window 。此外，如果同时出现两个或更多图像，则无法确定信息属于哪个。

我的目标是什么？

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

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

原代码:

{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
});
});

要知道的事情:

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