はじめに
サイドバーの追従のJavascriptライブラリを紹介しようと思います。
Qiitaでは初ものの記事となります。
サイドバーの追従といえば、CSSposition: sticky;で実装するのが通常かと思います。
sticky-sidebarを使うことのメリットとしては、
-
position: sticky;はブラウザによって対応していないものもあるが、sticky-sidebarはJavascriptライブラリなので基本的にはどのブラウザでも動く - Javascriptを使ってサイドバーの追従を実現しているため、Bootstrapなど複雑なCSSをいじるのは面倒という方にはとても便利
まずは下記リンク先のデモを使用してみて、便利だと思ったら使用してみてください。
- デモ
- sticky-sidebar (GitHub)
使い方
GitHubからダウンロード
赤枠部分をクリック。
パスを確認
ダウンロードしてきたファイルのパスを確認してください。
こちら、**your_path_to**/sticky-sidebar/dist/jquery.sticky-sidebar.min.js
HTML
- jQueryライブラリを読み込み
- sticky-sidebarのライブラリを読み込み
- classを付与（ main-content / sidebar / sidebar__inner / content ）
- jQuery にてstickySidebarを適用
- 分かりやすくするためにCSSを追加
sticky-sidebar.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sticky-Sidebar</title>
<!-- 5. 分かりやすくするためにCSSを追加 -->
<style type="text/css">
.container {
height: 2000px;
width: 1500px;
}
.top-content {
height: 150px;
width: 1500px;
background-color: green;
}
.main-content {
height: 2000px;
}
.inner_content {
height: 200px;
width: 500px;
float: left;
background-color: red;
}
.content {
height: 1200px;
width: 1000px;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="top-content"></div>
<!-- 3. classを付与（ main-content / sidebar / sidebar__inner / content ） -->
<div class="main-content">
<div class="sidebar">
<div class="sidebar__inner">
<div class="inner_content">
</div>
</div>
</div>
<div class="content">
<!-- Content goes here -->
</div>
</div>
</div>
<!-- 1. jQueryライブラリを読み込み -->
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<!-- 2. sticky-sidebarライブラリを読み込み -->
<script type="text/javascript" src="jquery.sticky-sidebar.min.js"></script>
<!-- 4. jQuery にて、stickySidebarを適用 -->
<script type="text/javascript">
$('.sidebar').stickySidebar({
topSpacing: 150,
bottomSpacing: 0,
containerSelector: '.main-content',
innerWrapperSelector: '.sidebar__inner'
});
</script>
</body>
</html>
まとめ
めちゃ使いやすいライブラリですので、是非使ってみてください。