JavaScript 滚动以缩小 Logo 和菜单栏

Question

我在 WordPress 网站上工作，我使用了以下 JavaScript 代码来缩小滚动上的 Logo :

标志有 id #logoid

CSS

.logoclass {width:100%; 
transition: width 0.5s linear;}

.scroll {margin-top:-10px;
width:55%;
transition: width 0.5s linear;}

Javascript

 <script type="text/javascript">
window.onscroll = () => {
const nav = document.querySelector('#logoid');
if(this.scrollY <= 250) nav.className = 'logoclass'; else nav.className =  
'scroll';};
</script>

现在这可以很好地简单地缩小图像并恢复大小。

现在我有两个问题:

1. 因为我使用的是 WordPress 插件，所以应用了很多属性内部标志，不在我的 .logoclass 或.scroll 所以一旦我滚动，这些属性就会被删除，而不是再次申请。有没有办法:

   • a) 向下滚动时仅更改大小，同时保留其他属性完好无损

   • b) 向上滚动时完全恢复到初始设置(删除新的类)

我的第二个问题是，我还想在滚动时修改菜单栏大小，但我不能使用相同的代码两次，因为它似乎只接受最后编写的代码。可能是因为 windows.onscroll 被添加了两次。有什么方法可以将两者结合起来吗？

Answer 1

对于 #1，您应该使用 classList添加或删除类的属性。

对于 #2，您应该能够在同一 if 语句中添加您想要的任何更改。

window.onscroll = () => {
  const nav = document.querySelector('#logoid');
  const menu = document.querySelector('#menubar');
  if (this.scrollY <= 250) {
    nav.classList.remove('scroll');
    menu.classList.remove('someclass');
  } else {
    nav.classList.add('scroll');
    menu.classList.add('someclass');
  }
};

.logoclass {
  width: 100%;
  transition: width 0.5s linear;
}

.scroll {
  margin-top: -10px;
  width: 55%;
  transition: width 0.5s linear;
}

body {
  height: 1000px;
}

#logoid {
  position: absolute;
  top: 0px;
  background: red;
  height: 25px;
}

<div id="logoid" class="logoclass"></div>
<div id="menubar" class="menuclass"></div>