Question

我试图制作与this site类似的内容（服务部分）我几乎通过使用waypoint.js实现了基本功能，但无法制作过渡动画，即用滚动控制。我尝试了这个jquery fadeout和fadein，但是如果我们滚动快速，没有触发的航点事件那会有时间。您可以查看我的代码（friddle）here

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

当最后一个航点事件触发＆＃34;固定＆＃34;类删除导致大空格。有没有办法解决这个问题。

Jquery - On Scroll使用动画更改div的内容（waypoint js）

0 个答案: