更改滚动位置上的文本内容

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

在这里演示