缩小移动滚动上的粘滞标题徽标

Question

我一直在想办法让我们仅在我们的 Shopify 网站的移动版本上应用的粘性标题在您向下滚动时缩小标题徽标。然后在滚动回最顶部时将标题徽标调整为原始大小。当然，如果这会缩小移动滚动上的整个标题大小就可以了！

这是最初使用的，但是当一直向上滚动时，徽标无法正确调整为原始大小。相反，在移动网站上的不同页面上，它会奇怪地变小：

$(window).scroll(function(){ 
if ($(this).scrollTop() > 10){      
$('.site-header__logo-image img').addClass("manage_width");
  } 
else{
//back to default styles
$('.site-header__logo-image img').removeClass("manage_width");
 }
});

我尝试了 JS、CSS 和 HTML 的变体，但到目前为止似乎没有任何效果。如果有人有我们可以仅适用于移动网站的代码，我将不胜感激！谢谢！！

Answer 1

我不知道您的确切设置，但听起来您需要在 javascript 中添加一个事件侦听器来检测用户何时滚动。
要更改徽标的大小，您可以在滚动时为其添加一个新类。

您还必须检测用户何时滚动到顶部，以便将徽标更改回原来的大小。
代码应如下所示：

CSS

.logo {
  width: 200px;
  height: 100px;
}

.logo--small {
  width: 100px;
  height: 50px;
}

JS

// get logo
var logo = document.getElementById('logo');

// listen for scroll
window.addEventListener("scroll", function() {
  // add small size class
  logo.classList.add('logo--small');
  // if user is at top of screen and has the small class, then remove it
  if (window.scrollTop == 0 && logo.classList.contains('logo--small')) {
        logo.classList.remove('logo--small');
    }        
});

您当然可以对类应用 css 过渡以使其获得更好的体验，还可以检测用户是向上还是向下滚动，并相应地缩小/放大徽标，而不是在用户到达最高层。