當元素進入視口時，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

你可以做這樣的事情：（見CodePen執行）從這裏取

功能：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)); 
} 

Altough這並不完美，它應該指向你正確的方向。

Answer 2

你在正確的軌道上，我認爲，如果你使用滾動事件與功能，如回答這個相似的問題：

Check if element is visible after scrolling

希望幫助:)