Stiky sidebar adalah sebuah sidebar dimana saat user scroll website kita maka sidebar tersebut seolah-olah menggantung di pojok kiri atau kanan layar. Nah kali ini kita akan mencari tahu bagaimana sih cara membuat stiky sidebar itu?
Demo
Daftar Isi
Caranya yang paling mudah adalah menggunakan sebuah plugin javascript yang bernama Theia Sticky Sidebar.
Jika sudah mendownload theia-sticky-sidebar.min.js, kamu tinggal tambahkan script ini sebelum tag body.
<script type="text/javascript" src="theia-sticky-sidebar.min.js">
Sebagai contoh, kita akan membuat sebuah halaman yang simple dengan sidebar seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Stiky Sidebar Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ngide.net</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-8">
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
</div>
<div class="col-md-4 sidebar">
<div class="theiaStickySidebar">
<h2>Fixed Sidebar</h2>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
</div>
</div>
<footer>
copyright @bcodes
</footer>
</div> <!-- /container -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="theia-sticky-sidebar.min.js"></script>
</body>
</html>
Jangan lupa juga mendambahkan file Jquery ya, karena theia sticky sidebar membutuhkan jquery untuk bisa bekerja.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 0
});
});
</script>
Langkah terakhir adalah menambahkan script untuk setup theia sticky sidebar.
Kamu bisa menambahkan script di atas di bawah script theia-sticky-sidebar.min.js
Final dari contoh di atas adalah seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Stiky Sidebar Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ngide.net</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-8">
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
<div class="jumbotron">
<h1>Main Body</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
</div>
<div class="col-md-4 sidebar">
<div class="theiaStickySidebar">
<h2>Fixed Sidebar</h2>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
</div>
</div>
</div>
<footer>
copyright @bcodes
</footer>
</div> <!-- /container -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 0
});
});
</script>
</body>
</html>
Sekarang coba buka dan scroll file tersebut di browser kesayangan kamu dan lihat sticky sidebar yang kita buat tadi sudah bekerja dengan normal.
Mudah bukan? Jika kamu punya cara lain untuk membuat sticky sidebar bisa komen di bawah ya.
Jangan lupa like & share kalau artikelnya bermanfaat 😀
