当元素进入视口时，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"> <circle class="graph-line-2 one" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line one" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> <svg width="250" height="250" class="graph photoshop"> <circle class="graph-line-2 two" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line two" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> <svg width="250" height="250" class="graph photoshop"> <circle class="graph-line-2 three" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line three" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> <svg width="250" height="250" class="graph photoshop"> <circle class="graph-line-2 four" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line four" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> <svg width="250" height="250" class="graph photoshop"> <circle class="graph-line-2 five" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line five" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> <svg width="250" height="250" class="graph photoshop"> <circle class="graph-line-2 six" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /> <circle class="graph-line six" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /> <text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff">Photoshop</text> </svg> 

这是codepen，如果您愿意

Answer 1

您可以执行以下操作：（有关实现，请参见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));
}

尽管这并不完美，但它应该为您指明正确的方向。

Answer 2

您走在正确的轨道上，我想如果您将scroll事件与功能结合使用，例如类似问题的答案：

滚动后检查元素是否可见

希望有帮助:)