-1

因此，以下选择器和定义以某种方式允许我的 scrollspy 主要表现出它在 Chrome 中应有的方式。没有它，scrollspy 会跳到屏幕的一半。CSS看起来像这样。

ul.scrspy.affix {
  top: 1.85rem;
}

这种类的链接非常奇怪，我想了解正在发生的事情并找到一种更好的方法来完成它正在做的事情。此外，当我进入渲染页面中的元素检查器时，浏览器正在将我的“affix”类更改为“affix-top”，这也很奇怪。

我欢迎任何有关如何追踪问题的建议，并对如何解决问题的建议持开放态度。

仅供参考，我的 scrollspy 有两个级别的孩子，所以它比 getboostrap.com 上的列表更复杂。lesscss.com 网站上有这样的例子。

4

1 回答 1

0

经过相当多的调查，我解决了上述几个问题。

首先，需要更改 affix 和 affix-top 类，以允许将侧导航定位在页面加载时与用户滚动时的正确位置。

  • 页面加载时的 affix-top：删除位置：已修复；您的元素中的属性，以便它以正常的文档流开始并且不会覆盖您的标题内容
  • 在滚动上附加：添加位置：固定；滚动时元素的属性

为了使其正常工作，您必须使用类似于上述选择器的东西。一种称为“链接”的技术，它允许您定位多个元素、id 和类以查找唯一元素。在这种情况下，它表示我正在寻找具有 scrspy 和 affix 类的 ul。目标必须具有所有三个属性才能被选中。

综合所有这些，上面的选择器告诉我的 scrollspy 元素，当用户滚动时，它的顶部位置应该是 1.85 rem。这是为了在菜单中的第一个列表项和屏幕顶部之间创建一点空间。由于 affix 类在用户 1) 位于页面顶部或 2) 页面首次加载时不应用，因此该样式将不应用并且对象将返回到正常的文档流。

于 2014-09-24T20:58:38.960 回答