Search code examples
javascriptanime.js

Change Opacity of Navbar-logo onScroll

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();
      }
    }

Solution

  • Try this code.

    I have implemented using jQuery.

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