jquery - 使用 jQuery 在水平滚动上更改 nav a.class

Question

我正在使用水平设计，左上角有一个导航菜单。我希望每个链接在您水平滚动时改变外观。我对垂直滚动导航使用了同样的东西，没有任何问题。所以我尝试了相同的代码，但使用 .scrollLeft(); 而不是 .scrollTop(); 和 .position().left 而不是.position().top。有什么想法可以让它发挥作用吗？

这是我的代码的 jsfiddle: https://jsfiddle.net/5xx6g7j8/2/

Answer 1

使用 #slideShow 获取元素的当前滚动位置并触发滚动事件。

我还添加了向左滚动时移除导航类。

$('#slideWrap').parent().scroll(function () {
    var winScroll = $(this).scrollLeft();
    $('.slide').each(function (i) {
        console.log($(this).position().left + " vs " + winScroll);
        if ($(this).position().left <= winScroll) {
            $('#crums li a').eq(i).addClass('visited');
        } else {
            $('#crums li a').eq(i).removeClass('visited');
        }
    });
});

JSFiddle Demo