Changing text content on scroll position

Question

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

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.

It's not really clear what it is you are trying to do. I **guess** that you should fade out the original content, then replace it and then fade the new text in but, as I said, it's not really clear what "more smooth" means. — Paulie_D, Apr 14 '15 at 12:01
I gave it to #date, but It didn't work for others (description two, three, four)... What I mean is, that I want this descriptions to change more smooth. This mean that i want them to fade-in and fade-out in smooth way. No changing like one-by-one in 1 sec. — Robert Ziobrowski, Apr 14 '15 at 12:03

score 2 · Accepted Answer · answered Apr 14 '15 at 12:05

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, e.g. 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

Changing text content on scroll position

1 Answers1