javascript - 当滚动到达该 div 时更改内部 div 的 CSS

Question

我正在尝试实现一个滚动功能，当内部 div 的 CSS 从顶部到达一定高度时，它会发生变化。

var $container = $(".inner-div");
var containerTop = $container.offset().top;
var documentTop = $(document).scrollTop();
var wHeight = $(window).height();
var minMaskHeight = 0;
var descriptionMax = 200;
var logoMin = -200;
var maskDelta = descriptionMax - minMaskHeight;
var $jobOverview = $container.find(".right");
var $jobLogo = $container.find(".left");

var curPlacementPer = ((containerTop - documentTop) / wHeight) * 100;
var topMax = 85;
var center = 20;
var bottomMax = -15;

//console.log("Placement: " + curPlacementPer);

function applyChanges(perOpen) {
  var maskHeightChange = maskDelta * (perOpen / 100);
  var opacityPer = perOpen / 100;
  var newDescriptionLeft = descriptionMax - maskHeightChange;
  var newLogoLeft = logoMin + maskHeightChange;
  if (newDescriptionLeft <= 0) newDescriptionLeft = 0;
  if (newLogoLeft >= 0) newLogoLeft = 0;
  if (opacityPer >= 1) opacityPer = 1;
  $jobOverview.css({
    transform: "translate(" + newDescriptionLeft + "%,-50%)",
    opacity: opacityPer
  });
  $jobLogo.css({
    transform: "translate(" + newLogoLeft + "%,-50%)",
    opacity: opacityPer
  });
}

if (window.innerWidth > 640) {
  $container.removeClass("mobile");
  // console.log("Placement: " + curPlacementPer);

  if (curPlacementPer <= topMax /*&& curPlacementPer >= center*/ ) {
    var perOpen = ((topMax - curPlacementPer) / 25) * 100;
    applyChanges(perOpen);
  } else if (curPlacementPer < center /*&& curPlacementPer >= bottomMax*/ ) {
    var perOpen = (((bottomMax - curPlacementPer) * -1) / 25) * 100;
    applyChanges(perOpen);
  } else {
    $jobOverview.css({
      transform: "translate(200%,-50%)",
      opacity: "0"
    });
    $jobLogo.css({
      transform: "translate(-300%,-50%)",
      opacity: "0"
    });
  }

<div class="outer-div">
  <div class="inner-div first">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="inner-div second">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="inner-div third">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="inner-div fourth">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

目前，所有内部 div 都会同时更改。
我注意到，当我将 $container 类更改为等于 '.first' 并指定更多时，它会起作用。

有什么方法可以使内部 div 相对于顶部的高度单独变化吗？有什么方法可以迭代滚动功能，以便将来可以添加更多内部 div 而不必担心更改滚动功能？

Answer 1

在原始 JavaScript 中，这是我的答案:

// Define the element -- The '#fooBar' can be changed to anything else.
var element = document.querySelector("#fooBar");

// Define how much of the element is shown before something happens.
var scrollClipHeight = 0 /* Whatever number value you want... */;

// Function to change an element's CSS when it is scrolled in.
const doSomething = function doSomething() {

    /** When the window vertical scroll position plus the
     *   window's inner height has reached the
     *   top position of your element.
    */
    if (
           (window.innerHeight + window.scrollY) - (scrollClipHeight || 0) >= 
           element.getBoundingClientRect().top
    )
        // Generally, something is meant to happen here.
        element.style = "/* Yay, some CSS! */"
};

// Call the function without an event occurring.
doSomething();

// Call the function when the 'window' scrolls.
addEventListener("scroll", doSomething, false)

这是我使用的方法。如果还有其他方法，我也很乐意看到它们，但这是我现在的答案。