如何让我的导航栏在滚动时变为半透明?

时间:2014-09-22 17:39:04

标签: javascript jquery html css

当我滚动页面时,希望让我的导航栏变为半透明,为此,我知道我需要编辑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;
 }

2 个答案:

答案 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