Question

我正在创建一个水平滚动网站。每次我点击菜单链接我使用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

我正在使用此question

中的一些代码

Answer 1

嗯，我做了一个'更简单'的代码版本，似乎它正在按你的意愿工作。

Click here to see the jsfiddle live demo

部分更新如下：

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

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

我使用ScrollTo插件的回调（onAfter）再次绑定滚动事件：

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

我是任何疑问的倾向！

当我使用scrollto jquery插件时，是否需要绑定/取消绑定滚动事件？

1 个答案: