javascript - scroll spy 和 afix 的问题

标签 javascript jquery html css twitter-bootstrap

我目前正在使用 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">
  • 我还在使用小脚本来实现平滑滚动功能,但我认为这不会影响它。

这是怎么回事?有什么想法吗?


网站: http://osxpeppermint.com/documentation

最佳答案

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/

相关文章:

javascript - 按键事件中千位和小数分开

javascript - 取消时 EditText 值被写入数据库值

javascript - jQuery 更改我的 <span> 内的文本

javascript - 无法通过jquery使用php登录

php - 使用 php 和 javascript AJAX 连接到数据库

Javascript 将所有值添加到变量

javascript - 使用带有可拖动元素的自定义光标的问题

php - 站点自动切换

python - 如何在 html 表中编辑从数据库中获取的数据? flask ,Jinja2

javascript - html和node.js之间的通信(基础)