首頁猿問滾動不起作用時更改顏色

滾動不起作用時更改顏色

JavaScript

躍然一笑 2022-07-08 18:18:39

我創建了一個滾動腳本，允許我在滾動時更改標題的顏色?，F在我也想為其他元素重用相同的腳本。但我似乎被困住了。當我復制相同的腳本時，第二個腳本有效，但第一個不再有效。你會在下面找到我的 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>

查看完整描述

1 回答

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

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;

}

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

<button>Pickles!</button>

</div>

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

<h2>By Pablo Neruda</h2>

</header>

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

<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>

反對回復 2022-07-08

1 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

滾動不起作用時更改顏色

滾動不起作用時更改顏色

1 回答

添加回答