机车滚动切换标题 onscroll

问题描述

我是第一次尝试 locomotive-scroll，到目前为止它一直很好，直到我不得不尝试切换标题样式 onscroll，因为 eventlistener 不起作用。我已经研究过 gsap 滚动触发器和交叉点观察器，但我很难弄清楚，因为我对该领域知之甚少。

我怎样才能使这项工作/在机车卷轴上做这样的事情？

let header = document.querySelector("header");

function toggleHeader(ev) {
  if (window.pageYOffset > 300) {
    header.classList.add("header--active");
  } else {
    header.classList.remove("header--active");
  }
}
window.addEventListener('scroll',function() {
  toggleHeader();
});

HTML/CSS/JS

<div data-scroll-container=''>
    <div class='header'>
      Header
    </div>
    <section data-scroll-section=''></section>
    <section data-scroll-section=''></section>
  </div>

.header {
  height: 80px;
  background: #f00;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  transition: ease 0.4s;
}

.header--active {
  height: 40px;
  background-color: #000;
}

section {
  height: 500px;
  border-bottom: 1px solid #f00;
}

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),smooth: true
})

解决方法

功能示例：

var el = document.getElementById("test");
var wheel = "nothing";
var scroll = new LocomotiveScroll({
  el: el,smooth: true,repeat: true,getDirection: true
});

scroll.on("call",(fun,dir,obj) => {

  console.log("call",fun,dir);

});

scroll.on("scroll",(obj) => {
  if (obj.direction == wheel) return;
  wheel = obj.direction;

  console.log("scroll--",obj.direction);
  console.log(obj.currentElements['0'],obj.currentElements['1'],Object.keys(obj.currentElements));

});

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.css">

<div id="test" data-scroll-container=''>
  <div class='header'>
    Header
  </div>
  <section data-scroll-section=''>
    <div data-toggle data-toggle-call="text1">

      <h2 class="intro__title" data-scroll data-scroll-call="text0">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last call
        was with a black background.</h2>

      <p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

    </div>

    <div data-toggle data-toggle-call="text2">
      <h2 class="intro__title" data-scroll data-scroll-call="text1">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last call
        was with a black background.</h2>

      <p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
    </div>
  </section>
</div>