如何使我的导航栏在滚动时变为半透明?
Posted
技术标签:
【中文标题】如何使我的导航栏在滚动时变为半透明?【英文标题】:How to make my navigation bar turn semitransparent on scroll? 【发布时间】:2014-11-16 18:25:47 【问题描述】:希望在滚动页面时让导航栏变为半透明,为此,我知道我需要编辑 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;
【问题讨论】:
【参考方案1】:试试这个脚本:
$( window ).scroll(function()
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
);
【讨论】:
酷,谢谢,我可以在上面添加一个过渡吗?也可以在页面顶部恢复正常状态吗? 我建议这样做:var x;$(window).scroll(function()x&&clearTimeout(x);$("#header").css("backgroundColor","rgba(55,55,55,0.4");x=setTimeout(function()$("#header").css("backgroundColor","rgba(55,55,55,1");clearTimeout(x);,300););
(在 Opera 12.17 上无法删除那些该死的方块)
过渡一下怎么样?除此之外它很棒!啊,我已经整理好了【参考方案2】:
Flopet17 的回答也是我的第一次尝试。
但是,当您停止滚动时,背景将保持半透明状态。为此,您必须在滚动停止后“重置”css。 (或删除额外的类名。) 对于这个“onscrollstop”功能,请查看:jQuery scroll() detect when user stops scrolling
【讨论】:
以上是关于如何使我的导航栏在滚动时变为半透明?的主要内容,如果未能解决你的问题,请参考以下文章
iOS:使导航栏在 UITableViewController 中始终可见
UINavigationBar 显示为半透明而不是不透明的白色