[traverso85]

Hi, have a little problem on mine web site, have made all site in one page, using jQuery plug-in scrollTo, when click on link in top menu, page scroll to called ID, but now have a problem for underline the name on menu corresponding at viewed ID,there is some script for find the position of some ID in page? have try with offset() from top but it dont work good for mine problem because some divs dont go to top....
Thank's Claudio

[Dormilich]

what do you have so far?

[traverso85]

$('nav ul li a').bind('click', function(event){
		var $anchor = $(this);
		
		$('html, body')	.stop().animate({
			scrollTop: $($anchor.attr('href')).offset().top - ($('#fisso').height() + 20)	
		}, 1500, 'easeInOutExpo');
		
		event.preventDefault();
	});

this is a code that have use for scroll page at link click.

[traverso85]

anyone can help?

[Anthonidas]

perhaps it's me, but i do not understand what your code has to do with your request? perhaps i did not understand at all your request?

what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?

[traverso85]

Anthonidas, on 04 January 2013 - 04:07 AM, said:

perhaps it's me, but i do not understand what your code has to do with your request? perhaps i did not understand at all your request?

what would you like to do exactly? i understand that it should scroll when you click on a link, but where do you want to have underlines?

thanks for response, i have made a menu in html, and with that function in jQuery when i click in one of that voice, page scroll to relative div that have the name of link.
Now i need to check in some mode how of that divs are visible in viewport, becausse over click at menu link i can scroll the page, and have to add a class at relative li of nav that underline that...

Sorry for my bad english.... and thanks

[Anthonidas]

Ok, now after having clarified the problem over PM we can look for a solution

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.

Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.

Here a link: http://archive.plugi...oject/lavalamp2

Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/

For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm

Is this helpful, or would you like to write your own scrolling and activating script?

This post has been edited by Anthonidas: 04 January 2013 - 02:26 PM

[Dormilich]

Anthonidas, on 04 January 2013 - 10:18 PM, said:

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down.

sounds like position: fixed;

[traverso85]

Anthonidas, on 04 January 2013 - 02:18 PM, said:

Ok, now after having clarified the problem over PM we can look for a solution />

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down. When he clicks a link, this link should be marked as active and the page should scroll to the right div containing the name specified in the clicked link.

Ok, there are different ways to mark your menu as active after having clicked on it... but as we are in the jQuery section of the forum I ask you: do you know lavalamp? In fact it does exactly what you want to have with your menu.

Here a link: http://archive.plugi...oject/lavalamp2

Here is an other link explaining how it works and with some demos. Have a look to it: http://www.gmarwaha....-jquery-lovers/

For the scrolling part there are also several plugins, here you have some explained: http://smashinghub.c...ect-plugins.htm

Is this helpful, or would you like to write your own scrolling and activating script?

thanks for response.... i don't know lava lamp, now let see what is, but for now have resolved with this script that i have made

function nav(){
	$('header nav ul li a').removeClass('attivo').each(function(index){
		var section = $(this).attr('href');
		if($(window).scrollTop() >= ($(section).offset().top)-80){
			$('header nav ul li a').removeClass('attivo');
			$('header nav ul li a[href='+section+']').addClass('attivo');
		}	
		if($(window).scrollTop() + $(window).height() == $(document).height()){
			$('header nav ul li a').removeClass('attivo');
			$('header nav ul li a:last').addClass('attivo');
		}
	})
}

and call the function in the on load function at scroll, it work , that's important but have a little problem that have to resolve, when scroll or click in nav it add relative class good, but whe scroll remvoe class and re add at scroll stop....
now have to fix this little problem....

[Anthonidas]

Dormilich, on 05 January 2013 - 02:31 AM, said:

Anthonidas, on 04 January 2013 - 10:18 PM, said:

for all the ones, who didn't get his problem: he would like his menu to stay on top of the page when scrolling down.

sounds like position: fixed;

Of course, but this was just a little description how it should be at the end, not his problem... lol

traverso85, on 05 January 2013 - 10:46 AM, said:

thanks for response.... i don't know lava lamp, now let see what is, but for now have resolved with this script that i have made

function nav(){
	$('header nav ul li a').removeClass('attivo').each(function(index){
		var section = $(this).attr('href');
		if($(window).scrollTop() >= ($(section).offset().top)-80){
			$('header nav ul li a').removeClass('attivo');
			$('header nav ul li a[href='+section+']').addClass('attivo');
		}	
		if($(window).scrollTop() + $(window).height() == $(document).height()){
			$('header nav ul li a').removeClass('attivo');
			$('header nav ul li a:last').addClass('attivo');
		}
	})
}

and call the function in the on load function at scroll, it work , that's important /> but have a little problem that have to resolve, when scroll or click in nav it add relative class good, but whe scroll remvoe class and re add at scroll stop....
now have to fix this little problem....

Ok this does the thing, but it should not be in the onload event. Instead it should be in the click and scroll event, as you would like to update your nav-bar when clicking/scrolling somewhere, wouldn't you? So your code is ok but in the wrong event.

[traverso85]

i have put it in scroll event that is in on load function... not god?

[SpAm101]

If it's online, a link to the page would probably be easier to work with

[traverso85]

SpAm101, on 07 January 2013 - 05:21 AM, said:

If it's online, a link to the page would probably be easier to work with />

sorry if response only now. have made some code on jsfield, obviusly here work good , but in my script the underline flashes during the scroll.
have added a another sidebar nav, that have some function of top bar, chenge color of li a for section of page are viewing; here is the link.

http://jsfiddle.net/...rso85/d2HaW/25/

Thanks, Claudio

[traverso85]

problem solved