Changing text content on scroll position

Question

I found a solution that didn't work mainly that I want. Here it is:

topic url

and this solution works for me:

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

jsfiddle

but I want to change content description in gray box more smooth. I've tried to give animation in CSS for it, but it didn't work.

Answer 1

I modified your script a bit to detect when the text changes and when that happens I apply a small animation with jQuery. I set the opacity to a low value, eg opacity:0.4 and then make a quick animation back to opacity:1 .

This will help your user to see easier the change in the text.

$(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