twitter-bootstrap - Bootstrap 3 在滚动时使用词缀将导航栏位置固定到顶部

标签 twitter-bootstrap twitter-bootstrap-3 offset navbar affix

这让我发疯......这可能很简单,因为我没有击中钉子:请给出提示:-)

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

我让它工作了,但是当词缀类开始时,导航栏下面的内容会发生变化。我找不到解决方法。

最佳答案

有两个选项 javascript 或 HTML5 data-属性

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

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

通过 JavaScript
通过 JavaScript 调用 affix 插件:
  $('#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

关于twitter-bootstrap - Bootstrap 3 在滚动时使用词缀将导航栏位置固定到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19717290/

相关文章:

html - Bootstrap 网格输出与预期不同

css - 将图像定位在 Div 上

twitter-bootstrap - Twitter Bootstrap Datepicker startDate & endDate 不工作

twitter-bootstrap-3 - Bootstrap 布局全屏 2 行

apache-kafka - Apache 卡夫卡 : commitSync after pause

javascript - 1000hz 验证器检查最小值、最大值和特定值

javascript - 使用 jquery/ajax 将 Css 样式转换为动态内容

jquery - Bootstrap slider - 单击事件错误

PHP - 与 "Undefined offset"错误不一致

text - SVG 文本 anchor 左上角