Different Nav Bar Color when it is at the top of Page

Question

I have my HTML Nav Bar here. It is currently colored with a white background and is fixed to the top of the page when I scroll. However, I want it to be initially transparent / stay transparent ONLY when it is at the top of the page, then it becomes white background as it scrolls down. How should I achieve this in JQuery?

        <header id="header" class="alt">
            <h1><a href="index.html">Company Namez</a></h1>
            <a href="#one">Features</a>
            <a href="#two">About us</a>
            <a href="#three">Team</a>
            <a href="#four">Contact Us</a>
        </header>

Possible duplicate of [change div color after scrolling 15% down with jquery](http://stackoverflow.com/questions/15828348/change-div-color-after-scrolling-15-down-with-jquery) — Bjørn Sørensen, Mar 09 '16 at 17:25
I answered a similar question here: [Changing nav-bar color after scrolling?](http://stackoverflow.com/a/23706233/3633952) — DylanH, Sep 09 '16 at 21:46

score 0 · Answer 1 · answered Mar 09 '16 at 17:37

https://jsfiddle.net/tdmr4gt9/

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     $('header').css("background-color", "rgba(255, 255, 255, 0)")
   }
   else {
     $('header').css("background-color", "rgba(255, 255, 255, 1)")
   }
});

score 0 · Accepted Answer · answered Mar 09 '16 at 18:04

you can achieve by adding jquery addClass() and removeClass() have a look into below code.

$(document).scroll(function() { 
   if($(window).scrollTop() != 0) {
     $('#header').addClass("navBgcolor");
   }
   else {
     $('header').removeClass("navBgcolor");
   }
});

header#header{
  margin: auto;
  text-align:center;
  position: fixed;
  width: 100%;
}

div.content{
  height : 500px;
}

.navBgcolor{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header id="header" class="alt">
  <h1><a href="index.html">Company Namez</a></h1>
  <a href="#one">Features</a>
  <a href="#two">About us</a>
  <a href="#three">Team</a>
  <a href="#four">Contact Us</a>
</header>
<div class="content"></div>

Different Nav Bar Color when it is at the top of Page

2 Answers2