是的，我已经检查了其他帖子。我在构建普通的html/css/js项目时没有遇到这个问题，但我需要这个项目的引导程序，我认为它在某种程度上干扰了我的脚本，但我不知道怎么做。
在滚动时，我希望颜色从透明变为x。我还想更改所有导航栏元素的样式，也许可以在滚动时缩小尺寸，但我试图在深入之前先更改颜色，但这本身不起作用。
有人能帮我吗？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./assets/styles/bootstrap.css" />
<link rel="stylesheet" href="./assets/styles/index.css" />
<link
rel="icon"
type="image/ico"
href="./assets/images/favicon/favicon.ico"
/>
<link
rel="icon"
type="image/png"
href="./assets/images/favicon/favicon.png"
/>
<title>test</title>
</head>
<body>
<!--Navbar Start-->
<nav class="navbar fixed-top navbar-expand-lg" id="nav">
<a class="lang-btn" href="#"><span>LANG</span></a>
<div class="container-fluid">
<a class="navbar-brand" href="#"
><img
src="./assets/images/logo_light.svg"
alt="test logo"
class="test-logo-light"
/>
<!-- <img
src="./assets/images/Logo_Dark.svg"
alt="test logo"
class="test-logo-dark"
/> -->
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-auto" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<div class="navbar-nav ms-auto">
<div class="settings">
<div class="nav-contact">
<span>Get in Touch</span>
<a href="tel:+00000" class="digit">00000</a>
</div>
<div class="nav-account">
<a href="#">
<img
src="./assets/images/MyAccount_icon_white.svg"
alt="my-account-icon"
/>
>
<a href="#">
<img
src="./assets/images/Register_icon_white.svg"
alt="my-account-icon"
/>
>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Bootstrap Bundle with Popper -->
<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="./scripts/bootstrap.js"></script>
<script src="./scripts/script.js"></script>
</body>
</html>
CSS
.navbar {
flex-direction: column;
margin: 0;
padding: 0;
top: 0;
text-transform: uppercase;
background-color: transparent !important;
}
.navbar.scrolled{
flex-direction: column;
margin: 0;
padding: 0;
top: 0;
text-transform: uppercase;
background-color: #38456b !important;
}
.navbar .container-fluid {
padding: 0 4rem;
}
.navbar .container-fluid .collapse ul li {
margin-top: 1vh;
}
.navbar-nav .nav-item .nav-link {
display: inline-block;
text-transform: uppercase;
font-family: "Georama";
font-size: 0.9rem;
line-height: 1.5rem;
font-weight: light;
color: var(--white);
margin: 0.3rem 0.3rem;
transform: 1s ease-in-out;
}
JS-
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop()> 50)
})
试试这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<title>test</title>
</head>
<style>
nav {
text-align: center;
position: fixed !important;
top: 0;
width: 100%;
z-index: 100;
opacity: 40%; /* change the transparent color derees here */
}
</style>
<body>
<nav class="navbar navbar-dark" style="background-color: rgb(100, 142, 142);" id="myNAV">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="py-4"></div>
<div class="py-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
</body>
<script>
document.addEventListener("scroll", myFunction);
function myFunction() {
if (document.documentElement.scrollTop == 0){
// change the transparent color derees here
document.getElementById("myNAV").style.opacity = "40%";
}else{
document.getElementById("myNAV").style.opacity = "100%";
}
}
</script>
</html>我真傻！没有人指出，但我忘了为jquery添加脚本，仅此而已！
把它放在头上