javascript - 仅当向左滑动时才转换 Logo ，而不是返回到原始位置时

Question

我正在 WordPress 中使用自定义主题构建主页。
我将 Logo 放在页面中间，当我滚动到它时，我需要将其固定。我用这段代码实现了它:

    var stickyLogo = jQuery('.logo_centered').offset().top;
jQuery(window).scroll(function() {  
    if (jQuery(window).scrollTop() > stickyLogo) {
        jQuery('.logo_centered').addClass('fixato');
    }
    else {
        jQuery('.logo_centered').removeClass('fixato');
    }  
});

并且它有效。

我还添加了单击它以隐藏它并打开幻灯片菜单时的过渡。

jQuery('.logo_centered').on('click', function(){
   jQuery('.logo_centered').toggleClass('hideme') 
})

这是菜单打开

jQuery('.centrato').on('click', function(){
   jQuery('.overlay').toggleClass('overlay--active') 

})
jQuery('.overlay').on('click', function(){
  if(jQuery('.overlay').hasClass('overlay--active')){
    jQuery('.overlay').removeClass('overlay--active')
  }
})
jQuery('.overlay').on('click', function(){
     jQuery('.logo_centered').toggleClass('pushme');
})
jQuery('.overlay').on('click', function(){
  if(jQuery('.logo_centered').hasClass('hideme')){
    jQuery('.logo_centered').removeClass('hideme')
    jQuery('.logo_centered').removeClass('pushme')
  }
})

但是，正如您在我的演示网站上看到的: http://arioldigioielleria.it/test/

动画在固定和返回时也会被触发。我怎样才能避免这种情况？

Answer 1

您可以通过使过渡特定于水平移动来禁用滚动时的过渡:

.logo_centered {
    transition:left 0.5s;
}

顺便说一句，现在仅使用 CSS 和 position:sticky 就可以实现这一点。您可能会发现它比 JavaScript 更易于维护:

A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

-MDN