ウェイポイントでaddClassとremoveClassトリガーを受信

Question

私は水平視差スクロールのウェブサイトを作っています。不透明度を変更しながら勾配（div 100vw, 300vh）を上下に動かすことで、夜明けから夜間に環境効果を得ることを私の目的としています。特定のdivがビューポートに来たときにjavascriptが目的のアクションをトリガーするようにしたい。

jquery、Waypoints、jInvertScrollを使用しています。

私は、コンソールからこれを取得：

<div class="dawndusk"></div>すべてが始まりです。 <div class="dawndusk lettherebenight"></div>#dawnにスクロールすると他のdivにスクロールしても何も変わりません。どうして？

これは、これは私のCSS

.dawndusk { 
    z-index:750; 
    opacity: .9; 

    background: #4B79A1; 
    background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%); 
    background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%); 
    background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%); 

    width:100vw; 
    height:300vh; 
    position:fixed; 
} 

#birth, 
#dawn, 
#day, 
#dusk, 
#night { 
position: absolute; 
top:0; 
} 

#birth { 
left:0; 
} 
#dawn { 
left:100vw; 
} 
#day { 
left:200vw; 
} 
#dusk { 
left:300vw; 
} 
#night { 
left:400vw; 
} 

.lettherebebirth, 
.lettherebedawn, 
.lettherebeday, 
.lettherebedusk, 
.lettherebenight { 
    transition: all 4s; 
    -webkit-transition: all 4s; 
} 

.lettherebebirth { 
    opacity: .9; 
    transform: translateY(0); 

} 

.lettherebedawn { 
    opacity: .2; 
    transform: translateY(-200vh); 
} 

.lettherebeday { 
    opacity: 0; 
    transform: translateY(0); 
} 

.lettherebedusk { 
    opacity: .5; 
    transform: translateY(-200vh); 
} 

.lettherebenight { 
    opacity: .8; 
    transform: translateY(-200vh); 
} 

Javascriptがこのようです私のHTML

<div class="dawndusk"></div> 

    <div class="flex" id="birth"> 
     ...content... 
    </div> 

    <div class="flex" id="dawn"> 
     ...content... 
    </div> 

    <div class="flex" id="day"> 
     ...content... 
    </div> 

    <div class="flex" id="dusk"> 
     ...content... 
    </div> 

    <div class="flex" id="night"> 
     ...content... 
    </div> 

です：

私が欲しかったクラスはオンとオフをトリガするために取得するにはどうすればよい

$('#birth').waypoint(function(direction) { 
    if (direction === 'up') { 
    $('.dawndusk').removeClass('lettherebedawn'); 
    $('.dawndusk').addClass('lettherebebirth'); 
    } 
}); 

$('#dawn').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebebirth'); 
    $('.dawndusk').addClass('lettherebedawn'); 
    } 
}); 

$('#day').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebedawn'); 
    $('.dawndusk').addClass('lettherebeday'); 
    } 
}); 

$('#dusk').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebeday'); 
    $('.dawndusk').addClass('lettherebedusk'); 
    } 
}); 

$('#night').waypoint(function(direction) { 
    if (direction === 'down') { 
    $('.dawndusk').removeClass('lettherebedusk'); 
    $('.dawndusk').addClass('lettherebenight'); 
    } 
}); 

私がしたいとき？

Answer 1

私はそれを自分で考え出しました。

jInvertscrollは、垂直スクロールの代わりに水平スクロールを模倣します。だから、すべてが画面上とコード上でうまくいくように思えましたが、問題はウェイポイントトリガーがすべて水平軸に配置されていることでした。それは縦軸にあると考えられていた。

#birth { 
     top:0; 
} 
#dawn { 
     top:100vw; 
} 
#day { 
     top:200vw; 
} 
#dusk { 
     top:300vw; 
} 
#night { 
     top:400vw; 
}