在滚动位置更改文本内容

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

在滚动位置更改文本内容

Changing text content on scroll position

html

javascript

css

jquery

scroll