• 0

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


Go to solution Solved by Seahorsepip,

Question

ACTIONpack    497

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/

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Seahorsepip    610
$( 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).
Link to post
Share on other sites
  • 0
Seahorsepip    610

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

Link to post
Share on other sites
  • 0
ACTIONpack    497

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");
		}
	};
}
Link to post
Share on other sites
  • 0
ACTIONpack    497

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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.