更改 Navbar-logo onScroll 的不透明度

Question

我想创建一个导航栏，在滚动超过 50 像素时更改其中徽标的不透明度，我在 JS 中编写了一些代码但它不起作用，我还在 anime.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(); 
      } });

更改 Navbar-logo onScroll 的不透明度

Change Opacity of Navbar-logo onScroll

javascript

anime.js