[英]How to make my navigation bar turn semitransparent on scroll?
希望使我的导航栏在滚动页面时变为半透明,要做到这一点,我知道我需要编辑ID标头并将其转换为rgba,但是,如何使它向下滚动页面,我的标题变成半透明的? 我假定使用某种JavaScript或jQuery,无论如何,这是我的代码,有人可以指导我吗?
<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;
}
试试这个脚本:
$( window ).scroll(function() {
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
});
Flopet17的答案也是我的第一次尝试。
但是,当您停止滚动时,背景将保持半透明。 为此,您必须在滚动停止后“重置” css。 (或删除其他类名。)有关此“ onscrollstop”功能,请查看: jQuery scroll()检测用户何时停止滚动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.