Hey everyone,

It's been a REALLY long time since I've been on here but I need some help. After about an hour or two of searching around for the solution all I get is broken scripts trying to merge two separate scripts together.

I have a simple one-page portfolio site I needed to make for myself, and I have a sticky header that will scroll down to four sections. Each section is color coded, and if I scroll to the section I want to add an 'selected' class to the nav item, but I also want to add a class to change the logo color to match the specific section your in.

Any help would be super appreciated since I've already wasted so much time trying to hack something together.

Code:
<div id="header">
    	<div class="container cf">
	    	<a href="#" class="brand about">SndRcv - SendReceive</a>
	    	<ul id="nav" class="cf">
		      <li><a class="about selected" href="#pageAbout">About</a></li>
		      <li><a class="work" href="#pageWork">Work</a></li>
		      <li><a class="trampt" href="#pageTrampt">Trampt</a></li>
		      <li><a class="contact" href="#pageContact">Contact</a></li>
		    </ul>    	
    	</div><!-- /container -->
    </div><!-- /header -->
Code:
#header .brand.about {
	background: url(../img/bg/logo.png) 0 0 no-repeat; 
	}

#header .brand.work {
	background: url(../img/bg/logo.png) -97px 0 no-repeat; 
	}

#header .brand.trampt {
	background: url(../img/bg/logo.png) -194px 0 no-repeat; 
	}

#header .brand.contact {
	background: url(../img/bg/logo.png) -291px 0 no-repeat; 
	}

#nav > li > a.about.selected,
#nav > li > a.about:hover
	{
	color: #3da2d6;
	}

#nav > li > a.work.selected,
#nav > li > a.work:hover	{
	color: #f32a64;
	}

#nav > li > a.trampt.selected,
#nav > li > a.trampt:hover	{
	color: #fda033;
	}
	
#nav > li > a.contact.selected,
#nav > li > a.contact:hover	{
	color: #9bb34f;
	}