Question

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

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

我想要一种将活动类附加到这些链接（即addClass()）的方法，具体取决于浏览器窗口的位置（以及视图中的内容）。

我已经找到了很多这方面的垂直版本，但是我的JS知识并不太棒，而且我无法成功地将它们转换为水平使用。

基本上我想要的是这个JSFiddle的横向版本。

我遇到过这个插件，但是还没有设法让这个为我工作： here

谢谢！

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

在水平免费滚动网站上自动突出显示导航链接

1 个答案: