这让我感到很烦恼...也许这很简单,但我没有抓住关键:请给一个提示 :-)
我正在尝试使用Bootstrap 3为我的网站设计新布局。我希望导航栏在滚动时固定在屏幕顶部。
我已经让它工作了,但是当 affix 类起作用时,导航栏下面的内容会移动。我无法解决这个问题。
这让我感到很烦恼...也许这很简单,但我没有抓住关键:请给一个提示 :-)
我正在尝试使用Bootstrap 3为我的网站设计新布局。我希望导航栏在滚动时固定在屏幕顶部。
我已经让它工作了,但是当 affix 类起作用时,导航栏下面的内容会移动。我无法解决这个问题。
有两个选择: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))
}
}
})
#nav.affix + #mainContent { padding-top: 75px; }
- kjaer108