當滾動超過 10 像素時，我有一個導航女巫會更改背景顏色等。但是，如果我保持超過 10 像素并重繪 頁面，它會回傳透明背景，直到我開始滾動頁面。
重繪 頁面超過 10 像素時如何使該功能正常作業？
代碼：
window.onload = scrollNavi;
function scrollNavi() {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css({ "background-color": "white", "box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" });
$(".nav-item").css("color", "#707070");
$(".logo").attr("src", "/images/logo/ccc-logo-new.png");
$(".navi-icon").css("color", "#707070");
}
else {
$(".navbar").css({ "background": "none", "box-shadow": "none" });
$(".nav-item").css("color", "white");
$(".logo").attr("src", "/images/logo/ccc-logo-hvid.png");
$(".navi-icon").css("color", "white");
}
});
};
正如您在上面看到的那樣，我嘗試使用 window.onload 激活它，但這似乎沒有幫助。
導航：
<nav class="navbar fixed-top navbar-expand-xl navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img class="logo" src="/images/logo/ccc-logo-hvid.png" alt="" height="65">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
uj5u.com熱心網友回復：
呼叫 時scrollNavi()，您所做的就是為scroll javascript 事件注冊一個事件處理程式。您應該做的是將滾動事件處理程式存盤在一個函式中并在頁面加載時呼叫它。
function scrollNavi() {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css({ "background-color": "white", "box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" });
$(".nav-item").css("color", "#707070");
$(".logo").attr("src", "/images/logo/ccc-logo-new.png");
$(".navi-icon").css("color", "#707070");
}
else {
$(".navbar").css({ "background": "none", "box-shadow": "none" });
$(".nav-item").css("color", "white");
$(".logo").attr("src", "/images/logo/ccc-logo-hvid.png");
$(".navi-icon").css("color", "white");
}
};
window.onload = scrollNavi;
$(window).scroll(scrollNavi);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320836.html
標籤：javascript 查询 css 推特引导