Вопрос

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!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top