我最近经常使用 Bootstrap,目前正在为我的网站创建一个新模板。我对此问题进行了大量搜索,但我找到的大多数内容都是为那些根本无法让 scrollspy
工作的人提供的。
我想做的是创建一个侧边导航,为字母表中的每个字母都有一个单独的目标。单击链接即可进入内容面板的该部分。内容面板将是按字母顺序排列的列表。手动滚动页面应该自动将导航栏中的链接设置为事件
,从而使字母突出显示(或我决定通过 CSS 对它们执行的任何操作)。
对于那些熟悉 iPhone 的人来说,这与他们在查看组织列表(例如联系人
应用程序)时所实现的非常相似。假设视口(viewport)显示几个按字母顺序排列的名称,从视口(viewport)顶部的 D
开始,到底部的 H
。
使用scrollspy
,仅突出显示最近的目标。下面的例子说明了我的意思。
示例:http://jsfiddle.net/panchroma/ExWDq/embedded/result/
我希望我的描述足够具体,让您能够理解我想要做什么。如果我在任何地方失去了你,请告诉我,我会尝试更好地重新解释。
scrollspy
是用来完成此任务的工具吗?
如果我知道一种方法来检查某个元素在屏幕上是否可见,我也许可以利用它在 Javascript 中制作一些可以完成我需要的一切的东西,但我希望能够使用 为此滚动 spy
。
感谢您的阅读。 :)
最佳答案
我不熟悉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));
});
}
关于javascript - 如何以可以同时激活多个目标的方式实现 `scroll-spy`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19640999/