0

我正在创建一个水平滚动站点。每次单击菜单链接时，我都会使用 scrollto 滚动到所选部分，但是当我使用滚动而不是链接滚动到某个部分时，它会弄乱导航样式。我认为问题是我在滚动事件中有代码并且滚动到它也触发滚动事件¿？

我想要实现的是在以下情况下突出显示导航菜单中的当前链接：1）我单击它 2）我使用浏览器滚动条手动滚动到一个部分 3）我单击下一个/上一个链接

也许问题出在这部分：

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);

我是 jquery 的新手，所以如果你看到任何可以改进的地方，请告诉我。欢迎任何建议:)

我不知道我是否解释得很好所以这是代码jsfiddle

我正在使用这个问题的一些代码

4

1 回答 1

0

好吧，我做了一个“更简单”的代码版本，它看起来就像你想要的那样工作。

点击这里查看 jsfiddle 现场演示

一些更新是：

变量index接收当前项目的索引。

根据index，导航中的相应项目将使用eq:()选择器突出显示，我正在使用相同的方法滚动页面。

onAfter并且我使用ScrollTo 插件的回调 ( ) 再次绑定滚动事件：

$('#slider').scrollTo('ul li:eq(' + index + ')', 800, {
    axis: 'x',
    onAfter: function() {
        $('#slider').bind('scroll', handler);
    }
});

我是任何怀疑的性格！

于 2012-07-04T14:31:01.610 回答