Do i need to bind/unbind the scroll event when i use scrollto jquery plugin?
Вопрос
I'm creating a horizontal scrolling site.Each time i click on the menu links i use scrollto to scroll to the selected section but when i scroll to a section using the scroll, not the links, it mess up the nav styling. I think the problem is that i have code in the scroll event and scrollto its firing the scroll event too¿?
What i want to achieve is highlight the current link in the nav menu when: 1) i click on it 2) i manually scroll to a section with the browser scrollbar 3) i click next/prev links
Maybe the problem is in this part:
var position = Math.abs( $('#slider ul').offset().left - 138 );
$('p.status').html( 'index:' + getCurrentSectionIndex(position) );
//disable the scroll event so it doesn't broke the flow
$('#slider').unbind('scroll',handler);
//scrolls to the selected section
$('#slider').scrollTo($('#' + $(this).attr('class')), 800, { axis: 'x' });
//enable again the scroll event
//$('#slider').bind('scroll',handler);
var timeout = setTimeout(function() {
$('#slider').bind('scroll',handler);
}, 3000);
I'm new to jquery so if you see any thing that can be improved, please, tell me.Any advice is welcomed :)
I don't know if i've explained this well so this is the code jsfiddle
I'm using some of the code from this question
Решение
Well, i did a 'simpler' version of your code, and it seems like it's working as you want.
Click here to see the jsfiddle live demo
Some of the update are:
A variable index
recieves the index of the current item.
Acording to the index
, the corresponding item os the nav will be highlighted using the eq:()
selector, and I'm using this same method to scroll the page.
And im using the callback (onAfter
) of the ScrollTo plug-in to bind the scroll event again:
$('#slider').scrollTo('ul li:eq(' + index + ')', 800, {
axis: 'x',
onAfter: function() {
$('#slider').bind('scroll', handler);
}
});
I am the disposition of any doubt!