更改Navbar-logo onScroll的不透明度

时间:2019-02-12 20:13:36

标签: javascript anime.js

我想创建一个导航栏,将其滚动的徽标的不透明度更改为超过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();
      }
    }

1 个答案:

答案 0 :(得分:1)

尝试此代码。

我已经使用jQuery实现了。

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