利用Affix实现Bootstrap导航栏

发表于   |   分类于   |  

接触Bootstrap不久，在Bootstrap网站看文档时觉得左侧的导航栏不错，可以随着内容位置的改变而自动定位到导航栏的相应位置，比普通的胶囊式导航栏高大上很多，就想要去实现它。
此处输入图片的描述

在网上找了好久，结果发现原来这个插件集成在Bootstrap中。真特么是骑驴找驴！

在Bootstrap文档中找到附加导航(Affix)插件

用法

您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。

  • 通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=”affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。

  • 通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

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

通过 CSS 定位

在上面两种使用附加导航（Affix）插件的方式中，您都必须通过 CSS 定位内容。附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。请按照下面的步骤，来为这三种状态设置您自己的 CSS（不依赖此插件）。

  • 在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
  • 当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供）。
  • 如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。