2

我最近一直在玩 Bootstrap，我目前正在为我的网站创建一个新模板。我在这个问题上做了很多搜索，但我发现的大部分内容都是针对那些根本无法scrollspy上班的人。

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

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

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

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

我希望我已经足够具体，让您了解我想要做什么。如果我在任何地方失去了你，请告诉我，我会尝试更好地重新解释。

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

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

谢谢阅读。:)

4

1 回答 1

2

我对 scrollspy 不熟悉，但你所追求的功能并不复杂：

调整这里提供的函数，这应该会给你一个集合中哪些元素当前可见的列表。给定此信息，您可以应用/删除任何您想要的 CSS 类。

您可以在浏览器中的“滚动”事件上运行此处理程序，尽管您可能想要“节流”或“去抖动”它。我相信有 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));
    });
}
于 2013-10-28T17:38:50.677 回答