要素がビューポートに入るとJavaScript/jQueryクラスが追加されますか？

Question

クラスを適用したい要素がビューポートに来たときにクラスを追加する方法はありますか？または、画面の下部が要素の上をある一定の距離を超えている場合

if ($(document).scrollTop() > 100) { 
        $(".graph-line.two").addClass("graph-75"); 

これに伴う問題は、それが文書の高さからの相対であるということですので、私は（モバイル上またはビュー）ページを縮小する場合：

は今のところ私はこのようなものを使用したいエフェクトを持っています要素が重なり合うと、ページが大きくなり、要素が表示されたときにクラス（アニメーション）が開始されません。

他の人が同様の質問をしているのを見て、回答を実装しようとしましたが、何もできないので何か助けていただければ幸いです。

これは私が持っているものです。

$(document).ready(function() { 
 
    $(".graph-line.one").addClass("graph-75"); 
 
    $(".graph-line-2.one").addClass("opacity"); 
 
    $(window).scroll(function() { 
 

 
    if ($(document).scrollTop() > 100) { 
 
     $(".graph-line.two").addClass("graph-75"); 
 
     $(".graph-line-2.two").addClass("opacity"); 
 
    } 
 

 
    if ($(document).scrollTop() > 450) { 
 
     $(".graph-line.three").addClass("graph-75"); 
 
     $(".graph-line-2.three").addClass("opacity"); 
 
    } 
 

 
    if ($(document).scrollTop() > 800) { 
 
     $(".graph-line.four").addClass("graph-75"); 
 
     $(".graph-line-2.four").addClass("opacity"); 
 
    } 
 

 
    if ($(document).scrollTop() > 1150) { 
 
     $(".graph-line.five").addClass("graph-75"); 
 
     $(".graph-line-2.five").addClass("opacity"); 
 
    } 
 

 
    if ($(document).scrollTop() > 1500) { 
 
     $(".graph-line.six").addClass("graph-75"); 
 
     $(".graph-line-2.six").addClass("opacity"); 
 
    } 
 
    }); 
 
});

.graph { 
 
    display: block; 
 
    margin: 100px auto; 
 
    transform: rotate(-90deg); 
 
    will-change: transform; 
 
} 
 
.graph-line { 
 
    stroke-dasharray: 628px; 
 
    stroke-dashoffset: -628px; 
 
    transform-origin: center; 
 
} 
 
.graph-75 { 
 
    animation: graph-75 1200ms ease forwards; 
 
} 
 
@keyframes graph-75 { 
 
    0% { 
 
    stroke-dashoffset: 0; 
 
    transform: rotate(360deg); 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 471; 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
.graph-line-2 { 
 
    transition: opacity 700ms; 
 
    opacity: 0.1; 
 
} 
 
.opacity { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<h1>Scroll Down</h2> 
 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 one" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line one" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg> 
 

 

 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 two" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line two" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg> 
 

 

 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 three" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line three" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg> 
 

 

 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 four" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line four" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg> 
 

 

 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 five" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line five" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg> 
 

 

 

 
<svg width="250" height="250" class="graph photoshop"> 
 
\t \t \t \t \t \t <circle class="graph-line-2 six" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> 
 
\t \t \t \t \t \t <circle class="graph-line six" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> 
 
\t \t \t \t \t \t <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> 
 
\t \t \t \t \t </svg>

Here's the codepen if you prefer

Answer 1

ホープ：このAltough Check if element is visible after scrolling

CodePen

$(window).on('scroll', function() { 
    $(".graph").each(function() { 
    if (isScrolledIntoView($(this))) { 
     $(this).find(".graph-line").addClass("graph-75"); 
     $(this).find(".graph-line-2").addClass("opacity"); 
    } 
    }); 
}); 

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

：

機能はここから取られた（実装にCodePenを参照してください）完璧ではない、それは正しい方向にあなたを指す必要があります。

Answer 2

あなたは正しい軌道に乗っている、次のような機能とスクロールイベントを使用している場合、私は思いますこの同様の質問への回答：

Check if element is visible after scrolling役立ちます:)あなたはこのような何かを行うことができ