滚动到达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)

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

Answer 2

考虑使用第 3 方 jQuery 插件来简化工作，例如以下之一：

https://github.com/xobotyi/jquery.viewport

或者

https://github.com/zeusdeux/isInViewport

那么你可以有额外的元素选择器，例如：":in-viewport"

所以你可以：

$(window).on('scroll',function() {
    $('div').not(':in-viewport').html('');
    $('div:in-viewport').html('hello');
});