Bootstrap 3使用固定导航栏位置的affix特性来实现滚动时将导航栏置于顶部

Question

这让我感到很烦恼...也许这很简单，但我没有抓住关键：请给一个提示 :-)

我正在尝试使用Bootstrap 3为我的网站设计新布局。我希望导航栏在滚动时固定在屏幕顶部。

我已经让它工作了，但是当 affix 类起作用时，导航栏下面的内容会移动。我无法解决这个问题。

- kjaer108

---

我知道了。将填充添加到导航栏后的元素中。#nav.affix + #mainContent { padding-top: 75px; } - kjaer108

Answer 1

有两个选择：JavaScript或HTML5的data-属性。

通过数据属性 要轻松地为任何元素添加附加行为，只需将 data-spy="affix" 添加到要监视的元素中。使用偏移量来定义何时切换元素的固定。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

通过JavaScript 使用JavaScript调用固定插件：

  $('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

演示 http://jsfiddle.net/6P5sF/56/

参考资料 http://getbootstrap.com/javascript/#affix-examples

- Mo.