javascript - 在元素的 20% 之前添加一个滚动类

Question

我有这个函数，它在滚动到元素并进入 View 时执行，我想编辑它以在滚动到元素的 20% 之前执行。

JS:

function isScrolledIntoView(elem) {
  var centerY = Math.max(0, ((jQuery(window).height() - jQuery(elem).outerHeight()) / 2) +
    jQuery(window).scrollTop());
  var elementTop = jQuery(elem).offset().top;
  var elementBottom = elementTop + jQuery(elem).height();
  return elementTop <= centerY && elementBottom >= centerY;
}

jQuery(window).on("scroll resize", function() {
  jQuery(".element)").each(function(index, element) {
    if (isScrolledIntoView(element)) {
      jQuery(element).addClass("newClass");
    }
  });
});

HTML:

<div class='element'>New Class Will Be Added Before 20% Of This Div</div>

Answer 1

您必须计算20%元素 height然后从元素 offset 中减去它来自top使用$(this).offset().top

堆栈片段

jQuery(window).on("scroll resize", function() {
  jQuery(".element").each(function() {
    var percentage = ($(this).outerHeight() * 20) / 100;
    if (jQuery(window).scrollTop() > jQuery(this).offset().top - percentage) {
      jQuery(this).addClass("newClass");
    } else {
      jQuery(this).removeClass("newClass");
    }
  });
});

.element {
  height: 200px;
  width: 200px;
  background: red;
  color: #fff;
  margin: 0 auto 30px;
}

body {
  margin: 300px 0;
}

.element.newClass {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='element'>New Class Will Be Added Before 20% Of This Div</div>
<div class='element'>New Class Will Be Added Before 20% Of This Div</div>
<div class='element'>New Class Will Be Added Before 20% Of This Div</div>
<div class='element'>New Class Will Be Added Before 20% Of This Div</div>
<div class='element'>New Class Will Be Added Before 20% Of This Div</div>