滚动不起作用时更改颜色

Question

我创建了一个滚动脚本，允许我在滚动时更改标题的颜色。现在我也想为其他元素重用相同的脚本。但我似乎被困住了。当我复制相同的脚本时，第二个脚本有效，但第一个不再有效。

你会在下面找到我的 html、css、javascript。希望有人可以提供帮助:)谢谢

window.onscroll = () => {

  const div = document.querySelector('#navbar');

  if(this.scrollY <= 10) div.className = ''; else div.className = 'scroll';

};

window.onscroll = () => {

  const div = document.querySelector('#navbar2');

  if(this.scrollY <= 10) div.className = ''; else div.className = 'scroll';

};

html {

  position: relative;

  top: 0;

  left: 0;

  max-width: 100vw;

  min-height: 200vh;

  margin: 0px;

  padding: 0px;

  border: 0px;

}

body {

  padding: 1.7vmin;

  font-size: 16px;

  font-family: sans, sans-serif;

  color: #333;

}

a {

  color: inherit;

  font-style: italic;

}

#navbar {

  position: fixed;

  top: 0;

  left: 0;

  height: 3em;

  width: 100%;

  background-color: #EEE;

  box-sizing: border-box;

  padding: 12px 18px;

  box-shadow: 0px 4px 7px #777;

  transition: background-color 0.4s ease-out;

}

#navbar2{

  height:30px;

  background-color:red;

  position:fixed;

}

#navbar2.scroll{

  height:30px;

  background-color:blue;

}

#navbar span {

  font-weight: 600;

  letter-spacing: .085em;

}

#navbar button {

  position: absolute;

  top: 0;

  transform: translateY(50%);

  right: 0;

  min-height: 1.5em;

  min-width: 80px;

  background-color: #eee;

  color: #222;

  border: 0px;

  border-radius: 2px;

  margin-right: 18px;

  text-transform: uppercase;

}

#navbar.scroll {

  background-color: #A1572F;

  color: #eef;

}

body > header {

  margin-top: 4.7em;

}

<div id="navbar">

      <span>Hello, It's me</span>

      <button>Pickles!</button>

    </div>

    <header>

      <h1>Ode to a Large Tuna in the Market</h1>

      <h2>By Pablo Neruda</h2>

    </header>

<div id="navbar2">NAVBAR2</div>

    <article>

Answer 1

window.onscroll = ...是一个分配，所以当你复制相同的语句时，你实际上是在重新分配window.onscroll监听器，这就是为什么只有最新的运行。相反，您需要分配一次并在其中执行所有重复的内容：window.onscroll = () => {&nbsp; changeColor(document.querySelector('#navbar'), this.scrollY);&nbsp; changeColor(document.querySelector('#navbar2'), this.scrollY);};function changeColor(div, scrollY) {&nbsp; if (scrollY <= 10) {&nbsp; &nbsp; div.className = '';&nbsp;&nbsp; } else {&nbsp; &nbsp; div.className = 'scroll';&nbsp; }}html {&nbsp; position: relative;&nbsp; top: 0;&nbsp; left: 0;&nbsp; max-width: 100vw;&nbsp; min-height: 200vh;&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; border: 0px;}body {&nbsp; padding: 1.7vmin;&nbsp; font-size: 16px;&nbsp; font-family: sans, sans-serif;&nbsp; color: #333;}a {&nbsp; color: inherit;&nbsp; font-style: italic;}#navbar {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 3em;&nbsp; width: 100%;&nbsp; background-color: #EEE;&nbsp; box-sizing: border-box;&nbsp; padding: 12px 18px;&nbsp; box-shadow: 0px 4px 7px #777;&nbsp; transition: background-color 0.4s ease-out;}#navbar2{&nbsp; height:30px;&nbsp; background-color:red;&nbsp; position:fixed;}#navbar2.scroll{&nbsp; height:30px;&nbsp; background-color:blue;}#navbar span {&nbsp; font-weight: 600;&nbsp; letter-spacing: .085em;}#navbar button {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; transform: translateY(50%);&nbsp; right: 0;&nbsp; min-height: 1.5em;&nbsp; min-width: 80px;&nbsp; background-color: #eee;&nbsp; color: #222;&nbsp; border: 0px;&nbsp; border-radius: 2px;&nbsp; margin-right: 18px;&nbsp; text-transform: uppercase;}#navbar.scroll {&nbsp; background-color: #A1572F;&nbsp; color: #eef;}body > header {&nbsp; margin-top: 4.7em;}<div id="navbar">&nbsp; &nbsp; &nbsp; <span>Hello, It's me</span>&nbsp; &nbsp; &nbsp; <button>Pickles!</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <header>&nbsp; &nbsp; &nbsp; <h1>Ode to a Large Tuna in the Market</h1>&nbsp; &nbsp; &nbsp; <h2>By Pablo Neruda</h2>&nbsp; &nbsp; </header><div id="navbar2">NAVBAR2</div>&nbsp; &nbsp; <article><p>Here,<br />among the market vegetables,<br />this torpedo<br />from the ocean<br />depths,<br />a missile<br />that swam,<br />now<br />lying in front of me<br />dead.</p><p>Surrounded<br />by the earth's green froth<br />—these lettuces,<br />bunches of carrots—<br />only you<br />lived through<br />the sea's truth, survived<br />the unknown, the<br />unfathomable<br />darkness, the depths<br />of the sea,<br />the great<br />abyss,<br /><em>le grand abîme</em>,<br />only you:<br />varnished<br />black-pitched<br />witness<br />to that deepest night.</p><p>Only you:<br />dark bullet<br />barreled&nbsp; &nbsp;<br />from the depths,<br />carrying<br />only<br />your<br />one wound,<br />but resurgent,<br />always renewed,<br />locked into the current,<br />fins fletched<br />like wings<br />in the torrent,<br />in the coursing<br />of<br />the<br />underwater<br />dark,<br />like a grieving arrow,<br />sea-javelin, a nerveless<br />oiled harpoon.</p><p>Dead<br />in front of me,<br />catafalqued king<br />of my own ocean;<br />once<br />sappy as a sprung fir<br />in the green turmoil,<br />once seed<br />to sea-quake,<br />tidal wave, now<br />simply<br />dead remains;<br />in the whole market<br />yours<br />was the only shape left<br />with purpose or direction<br />in this<br />jumbled ruin<br />of nature;<br />you are<br />a solitary man of war<br />among these frail vegetables,<br />your flanks and prow<br />black<br />and slippery<br />as if you were still<br />a well-oiled ship of the wind,<br />the only<br />true<br />machine<br />of the sea: unflawed,<br />undefiled,<br />navigating now<br />the waters of death.</p>&nbsp; &nbsp; </article>&nbsp; &nbsp; <footer>Extracted from <a href="https://www.poetryfoundation.org/poetrymagazine/poems/detail/49322">Poetry Foundation</a></footer>