Tutorial cara mudah membuat sticky sidebar di website

Posted on

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

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>


	
	<title>Stiky Sidebar Example</title>
	https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/cs... integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



	<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">
              Toggle navigation
              
              
              
            </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>
          </ul></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 -->

    ">http://code.jquery.com/jquery.min.js"></script>  
  	

    
    
    jQuery(document).ready(function() {
    	jQuery('.content, .sidebar').theiaStickySidebar({
      	// Settings
      	additionalMarginTop: 0
    	});
  	});
    	
    
</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 😀

Please follow and like us:
Agus Yusida

Hello, perkenalkan saya Agus Yusida, seorang freelancer programmer, pernah membuat startup dan suka mencoba hal-hal baru. Jika ada pertanyaan bisa DM saya di IG @yusidajohn untuk fast respond. Jangan lupa like facebook ngide.net ya!


Related Article