by Sticky Sidebar

Sticky Sidebar 是一個 JavaScript 外掛插件，大多用於製作有 sticky 效果的側邊欄（可理解為固定式、黏貼式）。支援 jQuery / Zepto，Firefox、Chrome、Safari 和 IE9+ 瀏覽器皆有兼容。

官方網站：Sticky Sidebar ⬆⬇、Github

筆者在工作上很常使用這個效果，最常見的使用範例如：Medium 文章頁左側邊欄
當閱讀文章時，頁面向下滾動，側邊欄會固定在同一個位置（高度），方便你隨時使用 Follow、拍手、收藏...等等功能，不需要再往上尋找側邊欄，非常實用！

安裝

首先，請到 cdnjs 載入 3.3.1 版的 sticky-sidebar（目前 cdnjs 提供到 3.3.1，Github 上最新版是 3.3.4）

CDN

<!-- sticky-sidebar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-sidebar/3.3.1/sticky-sidebar.min.js"></script>

或是到官方 Github 下載最新 3.3.4 版的 sticky-sidebar.js，並載入到專案 body 的最底部。

<!-- sticky-sidebar -->
<script type="text/javascript" src="js/sticky-sidebar.js"></script>

NPM

npm install sticky-sidebar

Bower

bower install sticky-sidebar

使用方法

使用 sticky-sidebar 的第一步，需要先創立一個基本結構，一定要有三個區塊：

1. 最外框的 main-content，用來指定頁面滑動到 main-content 就開始固定住 sidebar
2. 要固定的側邊欄 sidebar
3. 右側可滑動的內容 content

HTML

<div id="main-content" class="main">
    <div id="sidebar" class="sidebar">
        <div class="sidebar__inner">
            側邊欄內容
        </div>
    </div>
    <div id="content" class="content">
        文章內容
    </div>
</div>

創立好後就可以為它添加上 JavaScript 和參數設定：

JavaScript

<script type="text/javascript">
    var sidebar = new StickySidebar('#sidebar', { // 要固定的側邊欄
        containerSelector: '#main-content', // 側邊欄外面的區塊
        innerWrapperSelector: '.sidebar__inner',
        topSpacing: 20, // 距離頂部 20px，可理解成 padding-top:20px
        bottomSpacing: 20 // 距離底部 20px，可理解成 padding-bottom:20px
    });
</script>

以上步驟就可以擁有一個 sticky sidebar 功能了！
雖然功能完善了，但別忘了還需要加上 css 才能有視覺效果，這邊提供一些基本的 css 樣式：

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Arial, "微軟正黑體";
  margin: 0;
  padding: 0;
}

#main-content {
  margin: 20px 10px;
}

#content {
  float: right;
  border: 1px solid #aaaaaa;
  padding: 15px;
  margin-left: 15px;
  min-height: 2000px;
  color: #aaaaaa;
  width: calc(100% - 215px);
}

#sidebar {
  float: left;
  width: 200px;
  color: #333333;
  will-change: min-height;
}

#sidebar .sidebar__inner {
  border: 1px solid #333333;
  padding: 10px;
  position: relative;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  will-change: position, transform;
}

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

sticky sidebar 有個怪癖是無法使用 Flex 來排版，必須使用 float。
筆者試過幾次都會跑版，最後只好乖乖回歸 float 了｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡

main-content 記得要加上 clearfix 喔！

完整範例

以上的完整範例可以看筆者的 Codepen（請滾動捲軸）

其他範例

1. 官方範例
2. 筆者的 Codepen（添加 CSS 樣式設計）

sticky sidebar 不限於製作側邊欄，也可以拿來做固定在上方的導覽列，類似 position: sticky 的效果，關於 Position 的用法可以看這篇文章：Chris - 前端新手村 Position 定位

馬拉松終於到了倒數第二天！看到數字來到 Day 29 那說不出的感動啊｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡
每天邊上班邊煩惱鐵人賽文章的生活，終於要告一段落，各位戰友們明天見～（揮手