在滚动时更改导航栏徽标的不透明度

Question

我想创建一个导航栏，在滚动超过 50px 时更改其中徽标的不透明度，我已经用 JS 制作了一些代码但它不起作用，我也制作了动漫动画.js，动画可以工作但不会在 50px 上触发，你能帮忙吗？

//animation in animejs
var LogoScroll = anime({
      targets: '.Logo',
      autoplay: false,
      opacity: 0,
      duration: 400,
      easing: 'cubicBezier(.75,.09,.65,.84)',
    });
    
    
// code that doesn't work
window.onscroll = function LogoChange() {
      var scroll = window.scrollTop;
      if (scroll > 100) {
          LogoScroll.play();
      } else {
        LogoScroll.reverse();
      }
    }

Answer 1

试试这段代码。

我已经使用 jQuery 实现了。

 $(window).scroll(function () {
      var scroll = $(window).scrollTop();
       if (scroll > 100) { 
             LogoScroll.play(); 
       } else {
             LogoScroll.reverse(); 
      } });