滚动

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

我不确定究竟是如何定义“顶部”，但事实证明这对于观众而言非常混乱，因为字幕之间没有“暂停”，而且当图像甚至不完全可见时，div似乎会弹出窗户。此外，如果同时出现两个或更多图像，则信息属于哪个不确定。

我的目标是什么？

我希望div的信息仅对图像完全居中可见。中心+/- 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>

好的，所以这对我来说效果很好（查看虹膜帖子以获得进一步的解释）：

$(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. 添加了一个Threshold变量，用于设置所需的+/-百分比。
3. 脚本计算窗口的中心和每个.post的中心。