Bootstrap 5 導航欄背景顏色在滾動時沒有改變
[英]Bootstrap 5 navbar background color is not changing on scroll
問題描述
我正在構建一個 angular 應用程序，我在其中使用 Bootstrap 5。我創建了一個透明的導航欄，我希望在滾動頁面時看到背景顏色從透明變為深色。 它不起作用。 每次滾動頁面時，它仍然使我的導航欄保持透明而不是深色。
我的導航欄代碼：
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
<a href="#" class="navbar-brand">WorkonPro</a>
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
我寫的JS腳本就是為了實現這個目的。 （請注意，我寫了與 html 頁面相同的正文）
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
我與導航欄有關的風格如下：
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
請有人能告訴我我做錯了什么嗎？ 我錯過了什么？ 以及我該如何解決。
提前致謝。
2 個解決方案
解決方案1
0 2021-09-26 06:35:43
你的代碼對我來說工作正常.. 請檢查你的身體長度.. 運行你的 js 需要身體高度> 100vh + 100px 因為條件給定這是你的代碼，但它對我很好。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style=height:120vh class="bg-info">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
<a href="#" class="navbar-brand">WorkonPro</a>
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script> -->
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
復制並粘貼
解決方案2
0 2021-09-26 06:46:33
只需給你的導航欄一個 id 並輸入到目前為止對我有用的代碼
// Changing nav color
const navbar = document.getElementById("navbar");
window.onscroll = (e) => {
if (window.scrollY > 100) {
navbar.classList.replace("navbartransparent", "navbarcolored");
} else {
navbar.classList.replace("navbarcolored", "navbartransparent");
}};
Bootstrap 5 導航欄在滾動時不會改變背景顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.