很抱歉我的代码很乱。。。我是一个超级初学者，我想添加Javascript，尽管我们现在只讨论CSS和HTML。
我希望这个透明的导航在横幅后向下滚动时变暗(请参阅实物模型图像：这是网站。我希望包括搜索徽标向下滚动，除了公司徽标、包图标和"加入/登录"文本。
这些是我的密码。。。
<script src="script.js"> var nav=document.getElementById('nav');
window.onscroll=function(){
if(window.pageYOffset >100){
nav.style.background="#007bff";
nav.style.boxShadow="0px 4px 2px black";
}
else{
nav.style.background="transparent";
nav.style.boxShadow="none";
}
}</script>*{
padding:0px;
margin:0px;
box-sizing: border-box;
}
.topnav {
width: 100%;
background-size: cover;
}
.navbar{
width: 100%;
padding-bottom: 220px;
position: fixed;
top:-3%;
margin-left: 35%;
transition:.5 s;
}
.navbar ul li {
list-style: none;
display:inline-block;
padding:8px;
color:white;
font-size: 1.5vw;
font-family: sans-serif;
cursor: pointer;
border-radius: 10px;
transition:.5s;
}
.navbar ul li:hover{
background:orange;
}
.sitelogo img{
height: 130px;
width: auto;
position: relative;
left:-670px;
bottom: 5px;
}
.fa-bag-shopping{
margin-left: 1150px;
position:relative;
bottom: -20px;
font-size:1.8em;
}
.login{
position:relative;
margin-left: 1050px;
bottom: -45px;
}
.fa-magnifying-glass{
margin-left: 556px;
position:relative;
font-size:1.8em;
}<nav class="topnav">
<div class = "navbar" id = "nav">
<div class = "logoshopping">
<a class ="login" style="color:white;"> Join/Login</a>
<i class="fa-solid fa-bag-shopping" style = color:white;></i>
</div>
<div class = "sitelogo">
<img src="Images/AnaheraLogo.png" alt="Anahera Logo">
</div>
<ul>
<li>Home |</li>
<li>Shop |</li>
<li>Occasions |</li>
<li>About |</li>
<li>Contact</a></li>
<i class="fa-solid fa-magnifying-glass" style = "color:white;"></i>
</ul>
</div>
</nav>
</div>我尝试过教程，但没有成功。你们能帮我拿这些吗？
模型website
const nav = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) nav.style.background = 'black';
else nav.style.background = 'white';
});* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.topnav {
width: 100%;
background-size: cover;
background: orange;
height: 100px;
min-width: 400px;
}
.navbar {
width: 100%;
position: fixed;
top: 0px;
transition: 0.5s;
background: white;
height: 100px;
min-width: 400px;
}
.navbar ul li {
list-style: none;
display: inline-block;
padding: 8px;
color: white;
font-size: clamp(1rem, 1.5vw, 2.5rem);
font-family: sans-serif;
cursor: pointer;
border-radius: 10px;
transition: 0.5s;
}
.navbar ul li:hover {
background: orange;
}<body style="height: 2000px; width: 100vw">
<nav class="topnav">
<div class="navbar" id="nav">
<div class="logoshopping">
<a class="login" style="color: white">Join/Login</a>
</div>
<div class="sitelogo"><img src="Images/AnaheraLogo.png" alt="Anahera Logo" /></div>
<ul>
<li>Home |</li>
<li>Shop |</li>
<li>Occasions |</li>
<li>About |</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>简单地在jQuery下面使用|注意：替换你的类，我已经放了导航栏，例如
jQuery( function($){
$(window).scroll( function() {
if( $(this).scrollTop() > 10 ) {
$('.navbar').css({ backgroundColor : 'black !important;' });
} else {
$('.navbar').css({ backgroundColor : 'transparent !important;' });
}
});
});