<header id="header">
<div class="container">
<div class="main">
<div class="logo">
<a href="index.html"><div class="top-logo"></div></a>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Home<span class="border"></span></a></li>
<li><a href="my-portfolio.html">My Portfolio<span class="border"></span></a></li>
<li><a href="about-me.html">About & Contact<span class="border"></span></a></li>
</ul>
</nav>
</div>
</div>
</header>
#header {
position: fixed;
display: block;
width: 100%;
top: 0;
height: 77px;
z-index: 9;
min-width: 320px;
background: #EFEFEF;
}
答案 0 :(得分:0)
试试这个脚本:
$( window ).scroll(function() {
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
});
答案 1 :(得分:0)
Flopet17的答案也是我的第一次尝试。
但是,当您停止滚动时,背景将保持半透明状态。为此,您必须在滚动停止后“重置”css。 (或删除其他类名。) 有关此“onscrollstop”功能,请查看:jQuery scroll() detect when user stops scrolling