Question

我正在用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://arioldigioielleria.it/test/

动画在固定并返回时也会触发。如何避免这种情况？

Answer 1

在滚动时，可以通过将过渡特定于水平移动来禁用过渡：

.logo_centered {
    transition:left 0.5s;
}

顺便说一下，现在只能使用带有position:sticky的CSS。您可能会发现它比JavaScript更可维护：

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

-MDN

仅当向左滑动时才显示过渡徽标，而当返回原始位置时不

1 个答案: