Javascript Jquery-滚动时通过动画更改div的内容（航路点js）

我试着做一些类似的东西（服务部分） 我几乎通过使用waypoint.js实现了基本功能，但无法制作过渡动画，即通过滚动控制。 我尝试过使用jquery淡出和淡出，但如果我们快速滚动，会导致某些时候航路点事件不会触发。 您可以查看我的代码（friddle）

此外，当最后一个航路点事件触发“固定”类时，该类被删除，从而导致较大的空白。有没有办法解决这个问题

var $fixe = $('.fixe');
var $one = $('.one');
var $two = $('.two');
var $three = $('.three');
var $four = $('.four');
var $end = $('.dummy');


$fixe.waypoint(function (direction) {
    if (direction == 'down') {
        $fixe.addClass('fixed');
    }
    else {
        $fixe.removeClass('fixed');
    }
});
$one.waypoint(function (direction) {
    if (direction == 'down') {
        $('p').text("This is a test ONE");
        $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+TWO&w=200&h=100&txttrack=0");
    }
    else {
         $('p').text("This is a test ZERO");
         $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+ONE&w=200&h=100&txttrack=0");
    }
});

$two.waypoint(function (direction) {
    if (direction == 'down') {
        $('p').text("This is a test TWO");
        $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+THREE&w=200&h=100&txttrack=0");
    }
    else {
         $('p').text("This is a test ONE");
         $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+TWO&w=200&h=100&txttrack=0");
    }
});
$three.waypoint(function (direction) {
    if (direction == 'down') {
       $('p').text("This is a test THREE");
       $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+FOUR&w=200&h=100&txttrack=0");
    }
    else {
        $('p').text("This is a test TWO");
        $('img').attr("src","https://placeholdit.imgix.net/~text?txtsize=22&txt=Hello+THREE&w=200&h=100&txttrack=0");
    }
});

$end.waypoint(function (direction) {
    if (direction == 'down') {
        $fixe.removeClass('fixed');
    }
    else {
              $fixe.addClass('fixed');

}
}, { offset: '99%' });