javascript - 如何实现 `scroll-spy` 使多个目标可以同时处于事件状态？

Question

我最近经常使用 Bootstrap，目前正在为我的网站创建一个新模板。我对这个问题进行了大量搜索，但我发现的大部分内容都是为那些根本无法让 scrollspy 工作的人准备的。

我想做的是创建一个侧边导航，它为字母表中的每个字母都有一个单独的目标。您单击一个链接将您带到内容面板的该部分。内容面板将是一个按字母顺序排列的列表。手动滚动页面应该自动将导航栏中的链接设置为 active，使字母突出显示(或者我决定通过 CSS 对它们进行的任何操作)。

对于那些熟悉 iPhone 的人来说，这很像他们在查看有组织的列表(例如 Contacts 应用程序)时所实现的。假设视口(viewport)显示了几个按字母顺序排列的名称，从视口(viewport)顶部的 D 开始，到底部的 H。

使用scrollspy，只会突出显示最近的目标。下面的例子说明了我的意思。

示例:http://jsfiddle.net/panchroma/ExWDq/embedded/result/

我希望我已经足够具体，让您能够理解我正在尝试做的事情。如果我在任何地方失去了你，请告诉我，我会尝试重新解释得更好一些。

scrollspy 是用来完成这个任务的工具吗？

如果我知道一种方法来检查元素是否在屏幕上可见，我也许可以利用它在 Javascript 中制作一些东西来完成我需要的一切，但我希望能够使用 scrollspy 为此。

感谢阅读。 :)

Answer 1

我对 scrollspy 不熟悉，但你想要的功能并不那么复杂:

适配提供的功能here这应该给你一个集合中哪些元素当前可见的列表。根据此信息，您可以应用/删除所需的任何 CSS 类。

您可以在浏览器的“滚动”事件上运行此处理程序，但您可能希望“throttle” ' 或 ' debounce ' 它。我相信有提供等效功能的 jQuery 插件，但每个插件都只有十几行代码。

function getVisible( $els ) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    return $els.filter(function(i, elem) {
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        // Fully or partially visible, pick one

        // element is _fully_ visible
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

        // element is _partially_ visible
        return ((elemBottom <= docViewBottom) || (elemTop >= docViewTop));
    });
}