[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-cara-mudah-membuat-sticky-sidebar":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":6,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},438,"cara-mudah-membuat-sticky-sidebar","Tutorial cara mudah membuat sticky sidebar di website","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",null,[],"2020-09-25T16:00:00Z","2026-07-14T04:39:39.679512Z","\u003Cp>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?\u003C\u002Fp>\n\u003Ch3>Demo\u003C\u002Fh3>\n\u003Cp>Caranya yang paling mudah adalah menggunakan sebuah plugin javascript yang bernama \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FWeCodePixels\u002Ftheia-sticky-sidebar\">Theia Sticky Sidebar\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Jika sudah mendownload theia-sticky-sidebar.min.js, kamu tinggal tambahkan script ini sebelum tag body.\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script type=\"text\u002Fjavascript\" src=\"theia-sticky-sidebar.min.js\">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sebagai contoh, kita akan membuat sebuah halaman yang simple dengan sidebar seperti di bawah ini:\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n<head>\n\t\n\t<title>Stiky Sidebar Example<\u002Ftitle>\n\t<link rel=\"stylesheet\" href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\u002FK68vbdEjh4u\" crossorigin=\"anonymous\">\n<\u002Fhead>\n<body>\n\t<div class=\"container\">\n <!-- Static navbar -->\n <nav class=\"navbar navbar-default\">\n <div class=\"container-fluid\">\n <div class=\"navbar-header\">\n <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\n <span class=\"sr-only\">Toggle navigation<\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <\u002Fbutton>\n <a class=\"navbar-brand\" href=\"#\">Ngide.net<\u002Fa>\n <\u002Fdiv>\n <div id=\"navbar\" class=\"navbar-collapse collapse\">\n <ul class=\"nav navbar-nav\">\n <li class=\"active\"><a href=\"#\">Home<\u002Fa><\u002Fli>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fnav>\n <div class=\"row\">\n \t<div class=\"col-md-8\">\n \t\t<div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n \t<\u002Fdiv>\n \t<div class=\"col-md-4 sidebar\">\n\t\t <div class=\"theiaStickySidebar\">\n\t\t\t <h2>Fixed Sidebar<\u002Fh2>\n \t\t\t\t<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.<\u002Fp>\n\t \t<\u002Fdiv>\n \t<\u002Fdiv>\n <\u002Fdiv>\n <footer>\n \tcopyright @bcodes\n <\u002Ffooter>\n <\u002Fdiv> <!-- \u002Fcontainer -->\n\t<script type=\"text\u002Fjavascript\" src=\"http:\u002F\u002Fcode.jquery.com\u002Fjquery.min.js\"><\u002Fscript>\n\t<script type=\"text\u002Fjavascript\" src=\"theia-sticky-sidebar.min.js\"><\u002Fscript>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jangan lupa juga mendambahkan file Jquery ya, karena theia sticky sidebar membutuhkan jquery untuk bisa bekerja.\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script type=\"text\u002Fjavascript\">\n \n jQuery(document).ready(function() {\n \tjQuery('.content, .sidebar').theiaStickySidebar({\n \t\u002F\u002F Settings\n \tadditionalMarginTop: 0\n \t});\n \t});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Langkah terakhir adalah menambahkan script untuk setup theia sticky sidebar.\u003C\u002Fp>\n\u003Cp>Kamu bisa menambahkan script di atas di bawah script \u003Ccode>theia-sticky-sidebar.min.js\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>Final dari contoh di atas adalah seperti ini:\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n<head>\n\t\n\t<title>Stiky Sidebar Example<\u002Ftitle>\n\t<link rel=\"stylesheet\" href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.7\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\u002FK68vbdEjh4u\" crossorigin=\"anonymous\">\n<\u002Fhead>\n<body>\n\t<div class=\"container\">\n <!-- Static navbar -->\n <nav class=\"navbar navbar-default\">\n <div class=\"container-fluid\">\n <div class=\"navbar-header\">\n <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\n <span class=\"sr-only\">Toggle navigation<\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <span class=\"icon-bar\"><\u002Fspan>\n <\u002Fbutton>\n <a class=\"navbar-brand\" href=\"#\">Ngide.net<\u002Fa>\n <\u002Fdiv>\n <div id=\"navbar\" class=\"navbar-collapse collapse\">\n <ul class=\"nav navbar-nav\">\n <li class=\"active\"><a href=\"#\">Home<\u002Fa><\u002Fli>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fnav>\n <div class=\"row\">\n \t<div class=\"col-md-8\">\n \t\t<div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n\t\t <div class=\"jumbotron\">\n\t\t <h1>Main Body<\u002Fh1>\n\t\t <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.<\u002Fp>\n\t\t <\u002Fdiv>\n \t<\u002Fdiv>\n \t<div class=\"col-md-4 sidebar\">\n\t\t <div class=\"theiaStickySidebar\">\n\t\t\t <h2>Fixed Sidebar<\u002Fh2>\n \t\t\t\t<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.<\u002Fp>\n\t \t<\u002Fdiv>\n \t<\u002Fdiv>\n <\u002Fdiv>\n <footer>\n \tcopyright @bcodes\n <\u002Ffooter>\n <\u002Fdiv> <!-- \u002Fcontainer -->\n <script type=\"text\u002Fjavascript\" src=\"http:\u002F\u002Fcode.jquery.com\u002Fjquery.min.js\"><\u002Fscript>\n \n \t<script type=\"text\u002Fjavascript\" src=\"theia-sticky-sidebar.min.js\"><\u002Fscript>\n <script type=\"text\u002Fjavascript\">\n \n jQuery(document).ready(function() {\n \tjQuery('.content, .sidebar').theiaStickySidebar({\n \t\u002F\u002F Settings\n \tadditionalMarginTop: 0\n \t});\n \t});\n \t\n <\u002Fscript>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sekarang coba buka dan scroll file tersebut di browser kesayangan kamu dan lihat sticky sidebar yang kita buat tadi sudah bekerja dengan normal.\u003C\u002Fp>\n\u003Cp>Mudah bukan? Jika kamu punya cara lain untuk membuat sticky sidebar bisa komen di bawah ya.\u003C\u002Fp>\n\u003Cp>Jangan lupa like & share kalau artikelnya bermanfaat 😀\u003C\u002Fp>","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 ",[],[],0]