如何将此脚本中的功能从 .click 更改为 .scroll（并且脚本仍然有效）

Question

如何将此脚本中的函数从 .click 更改为 .scroll（并且脚本仍然有效）以便在滚动而不是单击时执行操作？

js 代码更改了最初位于另一个 image/icon 后面的 3 icons/images 的位置。像这样：https://prnt.sc/gCyTQDqS_dtD after a click on the image: https://prnt.sc/CjAbwM1D1Cvw

感谢您的帮助:-)

<style>
  
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
  
</style>



<script>
  
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );  

</script>

Answer 1

遗憾的是，我认为最好的解决方案是改变整个方法。对滚动做出反应的一种选择是使用路口观察器 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#result

参见下面的小路口观察器演示；只有当您向下滚动时，第二只小猫才会淡出视野

const one = document.querySelector(".one");
const two = document.querySelector(".two");

function handler(entries, observer) {
  for (entry of entries) {
    if (entry.isIntersecting) {
      two.classList.add("show")
    } else {
      two.classList.remove("show")
    }
  }
}

let observer = new IntersectionObserver(handler);
observer.observe(two);

.kitten {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.two { opacity: 0; }

.two.show{
  animation: fadeIn 5s;
  animation-fill-mode: forwards;
}  

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
  
#wrapper {
  padding-top: 100vh;
  padding-bottom: 100vh;
}

scroll me
<div id="wrapper">
  <img class="kitten one" src="//placekitten.com/100/100">
  <img class="kitten two" src="//placekitten.com/200/200">
</div>

如何将此脚本中的功能从 .click 更改为 .scroll（并且脚本仍然有效）

How can I change the function in this script from .click to .scroll (and still have the script working)

javascript

jquery