Javascript 收缩手机滚动条上的粘性标题徽标

我一直在试图找到一种方法，当你向下滚动时，缩小标题徽标，这样我们只在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的各种变体，但到目前为止似乎没有任何效果。如果有人有代码，我们可以申请到该网站的移动只我会非常感激！谢谢

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

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

CSS

JS

---

当然，您可以将css转换应用到类中，使其具有更好的体验，还可以检测用户是否在向上或向下滚动，并相应地缩小/扩大徽标，而不是在用户到达最顶端时简单地调整大小。

嘿，强尼，感谢您如此快速的响应！！我继续尝试实现CSS和JS，但它在移动版本上似乎根本不起作用（看起来它可能稍微破坏了菜单功能）。有什么建议吗？听起来好像有什么干扰了。您是否运行了控制台日志以确保这段代码正在运行？它不应该影响功能，除非您运行的其他东西可能会干扰，我们在这里所做的只是添加/删除类。。。不知道你的具体情况很难说好的，明白了。我把我们的JS复制到这里只是为了参考，我不完全确定这里的什么会直接干扰到这段代码：嗨，Nikki，哇，这是很多代码。。。如果不使用您的代码，我不可能知道，但是其中是否有其他滚动事件侦听器？当我搜索时，有很多关于滚动的引用，我想可能还有其他处理滚动的函数可能会导致冲突。

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

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

// 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');
    }        
});