我正在使用Twitter Bootstrap Affix JS组件.当我向下滚动页面时,我的UL列表正确粘贴.另外 – 当我点击单个列表项(很像Twitter在其文档页面上)时,它会在我的文档中滚动到我的锚点ID,但LI元素不会收到Twitter的“活动”类.当我滚动文档时也不会得到“活动”类.
当我滚动到文档中的特定部分(很像滚动间谍作品)时,我会期望适当的链接处于活动状态,但我似乎无法让它工作.
有没有什么特别的,我需要设置,以便Bootstrap会在适当的时候添加“活动”类?
解决方法
是的,您还需要使用ScrollSpy插件.您可以通过标记或通过JS激活它.让#scroll-pane是触发滚动事件的元素,并且#navbar是包含ul.nav的元素,以下内容应该可以正常工作:
<div id="scroll-pane" data-spy="scroll" data-target="#navbar">
JS
$('#scroll-pane').scrollspy({target: '#navbar'});
使用HTML或JS,但不能同时使用.
附加信息
当ScrollSpy插件被传递给一个目标,比如scrollspy({target:’#navbar’})时,它被用来构造一个窗体的选择器
target + ' .nav li > a'
在这个例子中,这将给出
'#navbar .nav li > a'
了解此选择器创建的规定很重要.
>原始目标必须是包含类nav的元素的元素.所以,不应该是你的目标.
> .nav元素必须包含列表项.
>这些列表项必须具有< a>作为一个直接的孩子.
< a>然后由其选择的元素由数据目标或href以’#’开头的那些过滤掉.这些href依次用于选择包含在ScrollSpy插件附加到的元素中的元素.存储所选择的偏移量,并且当滚动发生时,对存储的值进行当前滚动偏移的比较,更新相应的< a>元素与类活动.