0

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? Some kind of JavaScript or jQuery I presume, anyway, here's my code, can anyone guide me?

        <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;
 }
Florin Pop
  • 5,105
  • 3
  • 25
  • 58
user3441508
  • 35
  • 2
  • 7

2 Answers2

0

Try this script:

$( window ).scroll(function() {
$( "#header" ).css( "background-color", "rgba(55,55,55,0.4" );
});
Florin Pop
  • 5,105
  • 3
  • 25
  • 58
  • cool, thanks, can i add a transition on to this? also is it possible to revert back to normal state when at the top of the page? – user3441508 Sep 22 '14 at 17:52
  • 1
    I would sugest this: `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);});` (Can't delete those bloody squares on Opera 12.17) – Ismael Miguel Sep 22 '14 at 17:56
  • how about a transition though? other than that it's great! aaahh, i've sorted it – user3441508 Sep 22 '14 at 18:39
0

Flopet17's answer was my first try as well.

However, the background will stay semi-transparent when you stop scrolling. For that, you have to 'reset' the css after scrolling stops. (Or remove the additional class name.) For this 'onscrollstop' functionality, have a look at: jQuery scroll() detect when user stops scrolling

Community
  • 1
  • 1
Philip
  • 2,888
  • 2
  • 24
  • 36