我目前正在使用 scrollspy
插件和 affix
通过 Bootstrap。
我已经设置了左侧边栏导航,带有菜单和子菜单,而且... spy 工作正常。
但是,问题是:
- 当页面加载时,我的主菜单项“文档”具有“事件”类并突出显示。应该的
- 当用户向下滚动时,scrollspy(?)插件接管,“文档”主元素未突出显示。
一些注意事项(即使您仍然可以在链接中“查看源代码”):
- 我的 body 标签:
<body data-spy="scroll">
- 我的主要侧边栏标签:
<div class="bs-sidebar hidden-print" role="complementary" data-spy="affix" data-offset-top="70" data-offset-bottom="50">
- 我还在使用小脚本来实现平滑滚动功能,但我认为这不会影响它。
这是怎么回事?有什么想法吗?
最佳答案
Docs: To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the ). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
<body data-spy="scroll" data-target=".navbar-example">
所以你需要决定你在监视什么导航:侧面还是顶部。
此数据目标是 .nav(导航的包装器)的直接父级的 .class 或 #id。请参阅此处的文档: http://getbootstrap.com/javascript/#scrollspy
另外,确保你的 body 有一个相对位置:
Requires relative positioning
No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the .
关于javascript - scroll spy 和 afix 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26673743/