javascript - 滚动不起作用时更改颜色
问题描述
我创建了一个滚动脚本,允许我在滚动时更改标题的颜色。现在我也想为其他元素重用相同的脚本。但我似乎被困住了。当我复制相同的脚本时,第二个脚本有效,但第一个不再有效。
你会在下面找到我的 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>
<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
<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>
</article>
<footer>Extracted from <a href="https://www.poetryfoundation.org/poetrymagazine/poems/detail/49322">Poetry Foundation</a></footer>
解决方案
window.onscroll = ...
是一个分配,所以当你复制相同的语句时,你实际上是在重新分配window.onscroll
监听器,这就是为什么只有最新的运行。相反,您需要分配一次并在其中执行所有重复的内容:
window.onscroll = () => {
changeColor(document.querySelector('#navbar'), this.scrollY);
changeColor(document.querySelector('#navbar2'), this.scrollY);
};
function changeColor(div, scrollY) {
if (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>
<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
<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>
</article>
<footer>Extracted from <a href="https://www.poetryfoundation.org/poetrymagazine/poems/detail/49322">Poetry Foundation</a></footer>
推荐阅读
- ansible - Ansible - 剧本中的角色和任务执行处理
- vue.js - 使用 vee validate 为每个表单指定自定义消息
- java - Swagger UI - 请求的资源上不存在“Access-Control-Allow-Origin”标头
- javascript - vue js应用程序图像未从服务器加载
- c# - 在具有不同参数的接口中定义方法(C#)
- linux - 调查 32 位 MESA 驱动程序选择
- java - 将标签视图与底部导航结合起来
- javascript - javascript 到 css 选择器
- image-processing - 如何自动确定机器学习的特征?
- python - BeautifulSoup - 无法访问的网页