更改滾動位置上的文本內容

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

在這里演示