Question

我找到了一个主要不是我想要的解决方案。这是：

这个解决方案对我有用：

if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
    {
        $('#date').html($(this).find('.description').text());
        return;
    }

jsfiddle

但我希望更改灰色框中的内容描述更加流畅。我试图用CSS制作动画，但它没有用。

Answer 1

我稍微修改了你的脚本以检测文本何时发生变化，何时发生这种情况我用jQuery应用了一个小动画。我将不透明度设置为较低的值，例如opacity:0.4，然后快速动画回opacity:1。

这将有助于您的用户更轻松地查看文本中的更改。

$(window).load(function () {
    $(window).on('scroll resize', function () {
        var pos = $('#date').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {               
                var newDescr = $(this).find('.description').text();
                var oldDescr = $('#date').html();

                $('#date').html(newDescr); 
                if(newDescr !== oldDescr) {
                    $('#date').css('opacity', 0.4).animate({ 'opacity': '1',}, 200);
                return; 
                }
            }
        });
    });

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

Demo here

在滚动位置更改文本内容

1 个答案: