javascript - 自动突出显示水平自由滚动网站上的导航链接

Question

我有一个特定页面，其中包含一组图像white-space:nowrapdiv 中的图像，因此页面水平滚动。左侧有一个固定的（主）导航菜单。

我在图像下方有第二个导航集，当您单击各种链接时会使用它scrollTo可以将浏览器滚动到相关图像。第二个导航菜单包含在一个固定的 div 中，由一系列指向与图像关联的各种锚点的链接组成。

我想要一种在这些链接上附加和删除活动类的方法（即addClass()根据浏览器窗口的位置（以及视图中的内容）为这些链接（即）附加和删除活动类的方法。

我发现了很多垂直版本，但我的 JS 知识并不出色，我无法成功地将它们转换为水平使用。

基本上我想要的是这个JSFiddle的水平版本的水平版本。

我遇到过这个插件，但也没有设法让它为我工作： 这里

谢谢！

Answer 1

这是你的小提琴水平：

http://jsfiddle.net/x3V6Y/

我对 HTML 做了一点改动，这里是 JS：

$(function(){
    var sections = {},
        _width  = $(window).width(),
        i        = 0;

    // Grab positions of our sections 
    $('.section').each(function(){
        sections[this.name] = $(this).offset().left;
    });

    $(document).scroll(function(){
        var $this = $(this),
            pos   = $this.scrollLeft();

        for(i in sections){
            if(sections[i] >= pos && sections[i] <= pos + _width){
                $('a').removeClass('active');
                $('#nav_' + i).addClass('active');
            }  
        }
    });
});