現在ビューポート/現在ウィンドウに表示されている .column クラスのすべての要素にクラスを追加するにはどうすればよいですか?
たとえば、擬似コードでは次のようになります。
If(in window){
If has class .column{
add class .swoosh;
}
}
JavaScriptまたはjQueryでこれを達成するための助けをいただければ幸いです。
現在ビューポート/現在ウィンドウに表示されている .column クラスのすべての要素にクラスを追加するにはどうすればよいですか?
たとえば、擬似コードでは次のようになります。
If(in window){
If has class .column{
add class .swoosh;
}
}
JavaScriptまたはjQueryでこれを達成するための助けをいただければ幸いです。
または、プラグインを使用しない方法を選択した場合、このコードは、要素がスクロールされたウィンドウの上端または下端の上または下にあるかどうかを確認します。
CodePen を使用しているのは、現在 jsFiddle が死んでいるからです。
$(window).scroll(function () {
var windowSize = $(window).height();
var windowPosition = $(window).scrollTop();
var control = $(".element");
control.each(function () {
var elementPosition = $(this).position().top;
var elementHeight = $(this).height();
var elementInWindow = (windowSize + windowPosition > elementPosition) - (windowPosition - elementHeight < elementPosition);
if (elementInWindow == 0) {
$(this).addClass("blue");
} else {
$(this).removeClass("blue");
}
});
});
私はそれを試していません...しかし、あなたはここを見て、次の ようなことをすることができます:
$(":onScreen").find(".column").addClass("swoosh")