【问题标题】:Bootstrap 3 using affix to fixing navbar position to top when scrollingBootstrap 3 在滚动时使用词缀将导航栏位置固定到顶部
【发布时间】:2013-10-31 21:56:26
【问题描述】:

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

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

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

【问题讨论】:

  • 我想通了。在导航栏之后添加填充元素。 #nav.affix + #mainContent { padding-top: 75px; }

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


【解决方案1】:

有两个选项 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-10-27
    • 2014-06-04
    • 1970-01-01
    • 1970-01-01
    • 2023-03-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多