Single Page site w/ fixed nav, want to change two elements onclick or scroll

JavaScript
1

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. :slight_smile:

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. :slight_smile:


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



#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;
	}
2

Not 100% sure what your asking but here is how you can add and remove a class with jquery on click http://www.websitecodetutorials.com/code/jquery-plugins/jquery-add-and-remove-class.php

3

That I understand, but at the same time I’m adding a ‘selected’ class to the <a> on the navigation, I wanted to also add a specific class to <a class=“brand”> to match the corresponding nav item.

Essentially when someone clicks a specific nav item I want to add selected and then switch a class in another link.

If I click on #pageWork:
<a href=“#pageWork” class=“work”> = <a href=“#pageWork” class=“work selected”>
<a href=“#” class=“brand about”> = <a href=“#” class=“brand work”>

If I click on #pageContact:
<a href=“#pageContact” class=“contact”> = <a href=“#pageContact” class=“contact selected”>
<a href=“#” class=“brand contact”> = <a href=“#” class=“brand contact”>

Does that make more sense?

4

A good way to do that is to setup a click event on a parent element of those links (such as #nav) so that when one of the links is clicked, you can loop through and remove selected from all of those links, then add it just to the one that was clicked on.

5

Thanks Paul, I’ve got that under control. My problem is triggering a second even to add a specific class to another <a> that will change the color of my logo my moving a background image.

I have a buddy who knows Javascript better than I do and hopefully he can take a peak for me.

Thanks for everyones suggestions.