Page Scrolling jQuery Navigation

cani

New Member
I am building a website which can be viewed here: argit.bounde.co.ukI have done the majority of the content and I am now trying to work on the navigation. I have three navigation bars (only one is ever visible) and need this method to work no matter which is showing. If you resize your browser to make your window narrower that will show a second, and then when you scroll the navigation that appears is a third. I have got it working to a fashion but the problem is when I click a link it jumps to where it wants to go momentarily, then returns and then scrolls as it is meant to. This is because of the "href="http://stackoverflow.com/questions/15890360/#target" that i have left in the nav. I have tried including a "return false" but then if the broswer doesnt support JS then the navigation doesnt work at all.The next problem is I want a way to make the target "over". Currently when you click a link it scrolls to the selected one and the nav updates which link is "over" as it passes them. I want this for when the user is scrolling up and down the page, but if they click a link I want that link to be "over" (and the respective links from other navigations) and not be affected by the scroll checks that would normally override it. The solution I am using for my onClick navigation is below, I know there are plug ins that will do this kind of thing but I want to write it myself so i can get a better understanding of jQuery. Im not sure if the solution I am using at the moment is a good one, if not please advise me:function navigation() { $('html, body').stop().animate({ scrollTop: $($(this).attr('href')).offset().top }, 1500);}The solution I am using for the scrolling checks I found by accident and is below, It works by over riding the equation above it and is actually quite simple. There is also an action to fix the navigation when scrolling.function navCheck() {var documentHeight = $(document).height();var windowHeight = $(window).height();var windowTop = $(window).scrollTop() + 100;var navTop = $("#scrollanchor").offset().top;var mobileTop = $("#mobileanchor").offset().top;var mobileHeight = $("#mobileanchor").height();var overviewTop = $("#slider").offset().top;var bioTop = $("#bio").offset().top;var solutionsTop = $("#solutions").offset().top;var experianceTop = $("#experiance").offset().top;var contactTop = $("#contact").offset().top;if($(window).scrollTop() > navTop) { $("#leftfixer").addClass("leftfix"); } else { $("#leftfixer").removeClass("leftfix");}if($(window).width() < 1200){ if(windowTop - 90 > mobileTop + mobileHeight) { $("#mobilefix").slideDown(); } else { if(windowTop - 96 <= mobileTop) { $("#mobilefix").hide(); } } } else { $("#mobilefix").slideUp();}$("li").removeClass("over");$("li.navoverview").addClass("over");if(windowTop > bioTop) { $("li").removeClass("over"); $("li.navbio").addClass("over");}if(windowTop > solutionsTop) { $("li").removeClass("over"); $("li.navsolutions").addClass("over");}if(windowTop > experianceTop) { $("li").removeClass("over"); $("li.navexperiance").addClass("over");}if(windowTop > contactTop || windowTop > documentHeight - windowHeight) { $("li").removeClass("over"); $("li.navcontact").addClass("over");}}This is my first post here so if I have missed out any information Im sorry! I have also looked for similar posts but it seems most people go for a plugin when doing this kind of thing. Thank youUPDATE: The page jumping to the anchor has been fixed
 
Top