时间戳

首页 > 解决方案 > 过渡标志只在它向左滑动时而不是在它回到原来的位置时

javascript - 过渡标志只在它向左滑动时而不是在它回到原来的位置时

问题描述

我正在用 wordpress 中的自定义主题构建我的主页。
我把我的标志放在页面中间，当我滚动到它时我需要它固定。我用这段代码实现了它：

    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: //arioldigioieleria.it/test/

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

标签： javascriptwordpress

解决方案

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

.logo_centered {
    transition:left 0.5s;
}

顺便说一句，现在仅使用带有position:sticky. 你可能会发现它比 JavaScript 更易于维护：

粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定，直到它到达其父元素的边界。

-MDN _

推荐阅读