如何使我的导航栏在滚动时变为半透明？答案

【问题标题】：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;
 }

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：