iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 29

【Day 29】超級好用的側邊欄固定效果 - Sticky Sidebar

sticky-sidebar
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 那說不出的感動啊。゚ヽ(゚´Д`)ノ゚。
每天邊上班邊煩惱鐵人賽文章的生活,終於要告一段落,各位戰友們明天見~(揮手


上一篇
【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法
下一篇
【Day 30】終局之戰!是什麼理由支撐我完成 30 天的鐵人賽?
系列文
從平面轉型成網頁設計的 UI/UX 設計師30

尚未有邦友留言

立即登入留言