【Day 29】超级好用的侧边栏固定效果 - 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 那说不出的感动啊｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡
每天边上班边烦恼铁人赛文章的生活，终於要告一段落，各位战友们明天见～（挥手