当元素进入视口时，JavaScript/jQuery 添加类？答案

【问题标题】：JavaScript/jQuery add class when element comes into viewport?当元素进入视口时，JavaScript/jQuery 添加类？
【发布时间】：2016-12-14 22:43:57
【问题描述】：

当我想要应用类的元素进入视口时，有没有办法添加一个类？或者当屏幕底部超出元素顶部一定距离时？

现在我有我想要使用这样的效果：

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

问题在于它与文档高度相关，因此当我缩小页面（或在移动设备上查看）并且元素堆叠在一起时，页面会变得更高，而类（动画）不会' t 在元素出现时开始。

我看到其他人问过类似的问题，我试图实施他们得到的答案，但我无法得到任何工作，因此非常感谢任何帮助。

这就是我所拥有的：

$(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>

Here's the codepen if you prefer

【问题讨论】：

你不应该使用 $(window) 吗？这是一个更好地理解的链接stackoverflow.com/questions/17441065/…
对你的问题感到困惑，add class when element comes into viewport? 是什么意思。顺便说一句，window.onload 是最好的选择，如果你想在所有元素都加载（渲染）后执行你的 js stackoverflow.com/questions/588040/…
@arufian 当元素可见时...我添加的类包含一个动画，显然，我不想在用户向下滚动到元素所在的位置之前播放该动画.

标签： javascript jquery scroll addclass scrolltop

【解决方案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));
}

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

【讨论】：

您实际上只是从我提供的链接中复制+粘贴了答案？
我写我的时候还没有看到你的答案。我自己研究了它，我们刚刚结束了同一个 SO 问题......另请注意，我创建了一个 CodePen，我在其中测试了解决方案，所以它不仅仅是复制 + 粘贴。
很公平，比我晚了 20 分钟！我想一个快速的谷歌真的只需要。
@Founded1898 谢谢你们！那工作得很好。我现在只是想知道是否可以调整元素进入视图和添加类之间的间隙大小。 IE。我希望在滚动的早期阶段添加该类，例如，当元素显示一半时。
@Sean 好吧，您可以更改函数的返回语句，以便它检查 elemTop 和 elemBottom 减去 svg 高度的一半。也许是这样的：return ((elemBottom - circleHeight <= docViewBottom) && (elemTop - circleHeight >= docViewTop)); 而 circleHeight 是 elem.height() / 2

【解决方案2】：

你在正确的轨道上，我想如果你使用滚动事件的功能，比如这个类似问题的答案：

Check if element is visible after scrolling

希望有帮助:)

【讨论】：

感谢您的帮助:)