Question

我正在使用WordPress网站，我使用以下JavaScript代码缩小滚动徽标：

徽标的标识为#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>

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

现在我有两个问题：

由于我使用的是WordPress插件，因此应用了许多属性内部的徽标，不在我的.logoclass或。{ .scroll所以这些属性会在我滚动后被删除再次申请。有办法：
- a）向下滚动仅在保留其他属性的同时更改大小完整
- b）在向上滚动时完全恢复初始设置（删除新的类）

我的第二个问题是，我想在滚动时修改菜单栏大小，但我不能使用相同的代码两次，因为它似乎只接受最后写的代码。可能是因为windows.onscroll被添加了两次。有没有办法兼顾两者？

Answer 1

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

对于＃2，您应该能够在同一个if语句中添加所需的任何更改。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您向body标记添加全局滚动类，则无需更改JavaScript，如果您想要更改滚动内容，只需更改CSS。

window.onscroll = () => {
  const body = document.querySelector('body');
  if (this.scrollY <= 250) {
    body.classList.remove('scroll');
  } else {
    body.classList.add('scroll');
  }
};

.logoclass {
  width: 100%;
  transition: width 0.5s linear;
}

.scroll .logoclass, .scroll .menuclass {
  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>

如果你不想在滚动上运行多个功能，你应该使用addEventListener。

window.addEventListener('scroll', function() { 
    doSomething(); 
});
window.addEventListener('scroll', function() { 
    doSomeOtherThing();
});

滚动JavaScript以缩小徽标和菜单栏

2 个答案: