2

我有一个导航栏，在加载时从页面顶部开始大约 50 像素。当我向下滚动时，我希望导航栏将自己“固定”到页面的最顶部，并且在我滚动浏览其余内容时可见。这类似于官方引导教程 Github 站点上的导航栏。
通过使用

<ul class = "nav nav-list bs-docs-sidenav affix">

但是一旦我在上面添加“-top”，它看起来像

<ul class = "nav nav-list bs-docs-sidenav affix-top">

当我向下滚动页面时，导航栏不再保持原位并从视图中消失。

没有“-top”的jsfiddle

带有“-top”的jsfiddle

当我向下滚动时，如何将导航栏粘贴到页面顶部？

4

1 回答 1

15

有几件事需要纠正。请参阅固定的 jsfiddle。

  1. Affix 在 Bootstrap 中实现为使用 jQuery 的 JavaScript 代码，并且您既不包括 BS 的 JS 也不包括 jQuery
  2. 要为元素打开词缀，根据官方文档，使用data-spy="affix"，而不是class="affix". 你为什么这么做？类affix和affix-top服务于不同的目的——它们告诉你词缀当时的状态。如果此时您的元素是固定的，则类是affix，如果它是可滚动的，则 BS 将类更改为affix-top.
  3. 您必须告诉 BS 何时需要修复该元素。以像素为单位的距离（您必须滚动多少）由属性设置data-offset-top。还要在 CSS 中指定导航固定后的外观。如果它被绑定到顶部（窗口边框和元素之间没有空间），那么.affix { top:0; }就会这样做。
于 2013-03-10T08:06:01.427 回答