一旦用戶開始滾動，我想要一個 div 改變背景顏色。我把我寫的東西放在這個codepen 中。下面是js檔案的內容：
function scrollnav() {
var y = document.body.scrollTop();
if(y>1){
document.getElementById("navbar").style.backgroundColor = "blue";
}
else{ document.getElementById("navbar").style.backgroundColor = "none";
}
}
uj5u.com熱心網友回復：
據我了解，如果頁面滾動在頂部，則您想設定為一種顏色，如果不是，則設定為另一種顏色
這是一個作業示例。
window.onscroll = function(ev) {
if (window.scrollY == 0) {
document.getElementById("navbar").style.backgroundColor = "red";
}
else
{
document.getElementById("navbar").style.backgroundColor = "dodgerblue";
}
}; .herodiv{
min-height: 500px;
background-color: yellow;
width: 100%;
margin 0px;
padding 0px;
}
.navigation{
display: flex;
justify-content : space-between;
align-items: center;
justify-content: center;
padding-top: 0px;
padding-left: 35px;
padding-right: 35px;
position: -webkit-sticky;
position: fixed;
top: 0px;
width: 100%;
z-index: 9999;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<section class = "hero">
<div class = "herodiv">
<div id="navbar" class ="navigation" scroll="scrollnav()">
menu
section 1
section 2
</div>
</div>
</section>
</body>
</html>uj5u.com熱心網友回復：
“onScroll”事件應該附加到<body>. 您在 javascript 方法中所做的是決定哪些<div>需要繪制。我在下面整理了一個小例子：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
#container
{
background-color: black;
min-height: 200vh;
}
</style>
<body onscroll="javascript: changeColor();">
<div id="container"></div>
</body>
<script type="text/javascript">
function changeColor()
{
document.getElementById("container").style.backgroundColor = "red";
}
</script>
</html>
您可以滾動頁面并看到<div>背景顏色發生了變化。
在你的codepen代碼中，如果你移動scroll="scrollnav()"到<body>標簽，你可以看到它在作業。
干杯。
uj5u.com熱心網友回復：
let navbar = document.getElementById("navbar");
navbar.addEventListener('scroll', function (e) {
// handle the scroll event
});
uj5u.com熱心網友回復：
TL; DR，這是一個有效的js代碼：
window.addEventListener("scroll", scrollnav);
function scrollnav() {
var y = window.scrollY;
if (y > 1) {
document.getElementById("navbar").style.backgroundColor = "blue";
} else {
document.getElementById("navbar").style.backgroundColor = "unset";
}
}
現在讓我們深入了解一些教育細節：
簡單地說，你的 JS 函式沒有運行。您可以通過console.log在方法內部使用并觀察控制臺來確認。
首先，雖然和你的問題沒有關系scroll，沒有屬性，但是有onscroll屬性。
即使你使用onscroll什么也不會改變。因為當您滾動頁面時，您不會滾動#navbar元素，而是滾動整個頁面，window這樣您就可以從元素中洗掉方法呼叫并在 JS 檔案中添加正確的事件偵聽器：
window.addEventListener('scroll', scrollnav)
確認函式運行后，控制臺中將顯示更有意義的錯誤訊息。
要獲得最高位置，document.body.scrollTop()不是一個函式，所以你不能呼叫它。我建議您使用window.scrollY以獲得最佳效果。
最后但并非最不重要的一點是，CSSbackground-color屬性沒有值none, useunset或initial代替。
筆記：
- 即使你
window.addEventListener在你的函式定義之前添加，它仍然會因為提升而作業 - 偵聽視窗滾動事件是一項代價高昂的操作，您應該根據應用程式考慮節流或譴責，但這不在問題范圍內
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395547.html
標籤：javascript html css