[英]How to make my navigation bar turn semitransparent on scroll?
looking to make my navigation bar turn semitransparent when I scroll the page, to do this, I know I'll need to edit the ID header, and turn that to an rgba, however, how do I make it so that when I scroll down the page, my header becomes semitransparent? 希望使我的导航栏在滚动页面时变为半透明,要做到这一点,我知道我需要编辑ID标头并将其转换为rgba,但是,如何使它向下滚动页面,我的标题变成半透明的? Some kind of JavaScript or jQuery I presume, anyway, here's my code, can anyone guide me?
我假定使用某种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;
}
Try this script: 试试这个脚本:
$( window ).scroll(function() {
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
});
Flopet17's answer was my first try as well. Flopet17的答案也是我的第一次尝试。
However, the background will stay semi-transparent when you stop scrolling. 但是,当您停止滚动时,背景将保持半透明。 For that, you have to 'reset' the css after scrolling stops.
为此,您必须在滚动停止后“重置” css。 (Or remove the additional class name.) For this 'onscrollstop' functionality, have a look at: jQuery scroll() detect when user stops scrolling
(或删除其他类名。)有关此“ onscrollstop”功能,请查看: jQuery scroll()检测用户何时停止滚动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.