更改Navbar-logo onScroll的不透明度

Question

I want to create a navbar that changes the opacity of the logo in it onscroll over 50px, i have made some code in JS but it is not working, i have also made the animation in anime.js, the animation works but will not trigger on 50px, can you help?

 //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

Try this code.

I have implemented using jQuery.

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