javascript - Change background of navigation on change of section in single page website -

i have keep background of navigation on "home" section transparent. when viewport change on selection of other sections. background color of navigation permanent black.

  <header class="clearfix">     <nav>     <a href="#fbsection1">home</a>     <a href="#fbsection2">about us</a>     <a href="#fbsection3">events</a>     <a href="#fbsection4">contact us</a>     </nav>   </header> 

here fiddle

as understand it, want header background change based on section of site user on, correct?

look @ jquery waypoints plugin -- allows dynamically set classes elements based on scroll position. see here: http://imakewebthings.com/jquery-waypoints/#about

or, if want pure css solution, take @ following codepen:

http://cdpn.io/kftam

you use separate element background , use z-index layer these things correctly. have black background element z-index of 1, image z-index of 2, navigation z-index of 3.

the image need set position:relative;

the issue have careful in setting size of background element same size of navigation.

you need set on top image:

img {     position:relative;     z-index:999; } 

and actual background:

.nav-bg {     /* position , height same fixed nav */     position:fixed;     z-index:998;     background:#000; }