【轉】bootstrap 的 affix.js 插件

我覺得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高，但文檔多數簡單。按部就班操作了，有效果當然好，沒效果的話簡直不知道為什麼。之前我寫過 Scrollspy 用法，就是我在部落格上折騰該插件的一點總結。

這一篇也一樣。

Affix 效果

從字面上翻譯，則 affix 是固定的意義，但這個插件裡，這固定是有條件的。

先來看下 affix 的效果，本篇右側的目錄導航。

這一目錄部分，在頁面剛滾動時，是随頁面一起滾動的，但到達某一位置後，它開始固定在頁面上；頁面滾動到評論部分時，目錄不再固定，又随頁面一起滾動。

affix、affix-top、affix-bottom 類

頁面滾動過程中，Affix 插件會根據我們的配置參數切換應用到目錄部分的 CSS 類，整個滾動過程會産生三個類：

affix-top
affix
affix-bottom

插件提供的配置參數

offset: { }

，裡面包括兩個值：top 和 bottom。

整個過程用文字描述如下：

頁面加載完畢後，應用 affix 效果的内容會增加一個 .affix-top 樣式類
當頁面向下滾動了 top 的距離時， .affix-top 切換成 .affix 類
頁面滾動到離底部距離為 bottom 時， .affix 類切換成 .affix-bottom

這樣，我們根據需要定義這三個類的樣式就好了。

案例

仍是本篇，

目錄部分，我添加了一個 ID

myaffix

，在引用 jQuery 與 Bootstrap.js 後，添加 JavaScript 代碼如下：

$('#myaffix').affix({
    offset: {
      top: 50
    , bottom: function () {
        return (this.bottom = $('#comments').outerHeight(true) + $('#footer').outerHeight(true))
      }
    }
});

這裡我通過 JavaScript 設定 offset 值，而不是直接在 HTML 标簽中應用屬性

data-spy="affix"

、

data-offset-top

與

data-offset-bottom

，這是因為評論部分的高度無法确定，bottom 值隻能動态計算。

這樣，頁面加載完成後，#myaffix 有一個

.affix-top

類，在滾動 50px 後，#myaffix 部分有一個

.affix

類，在離頁面底部距離 bottom 值時，#myaffix 部分的類又變成

.affix-bottom

。

CSS 裡，我隻定義了兩個類：

.affix{position:fixed;top:30px;}
.affix-bottom{position:absolute;}

插件會自動計算

.affix-bottom

類的 top 值，是以無需我們設定。

注意事項

如果發現固定部分在滾動時有抖動現象，需要給 body 設定

position:relative

。

參考

bootstrap-affix.js issue

jspm 安裝使用 Bootstrap 與 jQuery
Bootstrap ScrollSpy 用法

轉自：https://www.zfanw.com/blog/twitter-bootstrap-affix-js.html

【轉】bootstrap 的 affix.js 插件

Affix 效果

affix、affix-top、affix-bottom 類

案例

注意事項

參考

相關文章