javascript - 在滚动位置更改文本内容

Question

我找到了一个解决方案，但主要是我想要的不起作用。在这里:

topic url

这个解决方案对我有用:

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