How to get my nav marker working again? (jQuery)

[ACTIONpack]

I have markers in my nav telling the user where they are at. It works fine when I only use the # once but when I do it mroe than one it does not work anymore. Is there a way I can keep the marker work and have it use more than once?

 

If you don't know what I'm talking about, it's the small circles on the left side on my one page website. I have # links on the slider on top so it will jump to a different part of the page. Circle should be solid when in the right section tag.

 

http://adhesivesquares.com/one-page/

[Seahorsepip Veteran]

$( window ).scroll(function(){
	if($(window).scrollTop() >= $("#forth").offset().top){
		$('.header').removeClass('darker');
	} else if($( window ).scrollTop() > $("#main").height()){
		$('.header').addClass('darker');
	} else {
		$('.header').removeClass('darker');
	}
});

$( window ).scroll(function(){
	if($(window).scrollTop() >= $("#forth").offset().top){
		$('nav').removeClass('nav-change');
	} else if($( window ).scrollTop() > $("#main").height()){
		$('nav').addClass('nav-change');
	} else {
		$('nav').removeClass('nav-change');
	}
});

Why twice the same thing :s

 

 

Anyway:

$( window ).scroll(function(){
	$("nav ul li a").removeClass("active");
	if($(window).scrollTop() >= $("#forth").offset().top){
		$("nav ul li a[href='#forth']").addClass("active");
	} else if($(window).scrollTop() >= $("#third").offset().top){
		$("nav ul li a[href='#third']").addClass("active");
	} else if($(window).scrollTop() >= $("#secondary").offset().top){
		$("nav ul li a[href='#secondary']").addClass("active");
	} else {
		$("nav ul li a[href='#main']").addClass("active");
	}
});

Edit: changed last if else to if, fixes indicator on page top.

 

There might a better method instead of just offset().top, like looking which section is currently mostly visible, you can try thinking of a method for it yourself else I can write if for you when I have time(gotta go now :P).

[Seahorsepip Veteran]

I don't even see any nav markers in the first place :S

[ACTIONpack]

I don't even see any nav markers in the first place :s

 

If you hover over the  line circle on the left it should look like that when it's in each section tag. It works if I don't add the # in the <div id="slider">.

<nav>
		<ul>
			<li><a href="#main"><span>Home</span></a></li>
			<li><a href="#secondary"><span>More Gripping</span></a></li>
			<li><a href="#third"><span>Fast & Easy</span></a></li>
			<li><a href="#forth"><span>Invisible Solution</span></a></li>
		</ul>
	</nav>


$('a[href^="#"]').click(function(event) {
		var id = $(this).attr("href");
		var target = $(id).offset().top;
		$('html, body').animate({scrollTop:target}, 500);
		event.preventDefault();
	});
function getTargetTop(elem){
	var id = elem.attr("href");
	var offset = 60;
	return $(id).offset().top - offset;
}
	$(window).scroll(function(e){
		isSelected($(window).scrollTop())
	});
	var sections;
	$( document ).ready(function() {
		sections = $('a[href^="#"]');
		sections = $('a[href^="."]');
	});
function isSelected(scrolledTo){
	var threshold = 100;
	var i;
	for (i = 0; i < sections.length; i++) {
		var section = $(sections[i]);
		var target = getTargetTop(section);
		if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
			sections.removeClass("active");
			section.addClass("active");
		}
	};
}

[ACTIONpack]

Thanks, I did two because I'm not good at javascript and it work. I have to get it done before 5pm today. Which I just finish! Too bad I didn't have time to get it responsive.