{"id":1109,"date":"2019-01-02T11:26:55","date_gmt":"2019-01-02T04:26:55","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1109"},"modified":"2019-01-02T11:26:55","modified_gmt":"2019-01-02T04:26:55","slug":"fixed-sidebar-css","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/","title":{"rendered":"Fixed Sidebar (CSS)"},"content":{"rendered":"<p>Pada artikel kali ini, kita akan mencoba bagaimana membuat sebuah sidebar, berada tetap (fixed) pada posisinya ketika halaman discroll. Caranya tidak begitu sulit, karena yang akan kita perlukan hanya menambahkan properti css position.<br \/>\n<!--more--><\/p>\n<p>Untuk langkah-langkahnya kalian bisa coba potongan-potongan skrip berikut:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;div class=\"sidenav\"&gt;\r\n  &lt;a href=\"#about\"&gt;About&lt;\/a&gt;\r\n  &lt;a href=\"#services\"&gt;Services&lt;\/a&gt;\r\n  &lt;a href=\"#clients\"&gt;Clients&lt;\/a&gt;\r\n  &lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"main\"&gt;\r\n  &lt;h2&gt;Sidebar&lt;\/h2&gt;\r\n  &lt;p&gt;This sidebar is of full height (100%) and always shown.&lt;\/p&gt;\r\n  &lt;p&gt;Scroll down the page to see the result.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n  &lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Untuk skrip diatas bisa ditempatkan pada bagian tag html body, kemudian dapat dilanjutkan dengan menambahkan css dan perlu kita perhatikan, yang sangat berperan pada teknik ini adalah css properti position.<\/p>\n<pre class=\"lang:default decode:true \" >body {\r\n  font-family: \"Lato\", sans-serif;\r\n}\r\n\r\n.sidenav {\r\n  height: 100%;\r\n  width: 160px;\r\n  position: fixed;\r\n  z-index: 1;\r\n  top: 0;\r\n  left: 0;\r\n  background-color: #111;\r\n  overflow-x: hidden;\r\n  padding-top: 20px;\r\n}\r\n\r\n.sidenav a {\r\n  padding: 6px 8px 6px 16px;\r\n  text-decoration: none;\r\n  font-size: 25px;\r\n  color: #818181;\r\n  display: block;\r\n}\r\n\r\n.sidenav a:hover {\r\n  color: #f1f1f1;\r\n}\r\n\r\n.main {\r\n  margin-left: 160px; \/* Same as the width of the sidenav *\/\r\n  font-size: 28px; \/* Increased text to enable scrolling *\/\r\n  padding: 0px 10px;\r\n}\r\n\r\n@media screen and (max-height: 450px) {\r\n  .sidenav {padding-top: 15px;}\r\n  .sidenav a {font-size: 18px;}\r\n}<\/pre>\n<p>Hasilnya bisa teman-teman lihat, dibawah ini:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/0q8n4Lda\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n<p>Untuk artikel selanjutnya, masih kita akan mencoba css-css properti yang lain. Sampai berjumpa kembali diartikel berikutnya dan terima kasih.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada artikel kali ini, kita akan mencoba bagaimana membuat sebuah sidebar, berada tetap (fixed) pada posisinya ketika halaman discroll. Caranya tidak begitu sulit, karena yang akan kita perlukan hanya menambahkan properti css position.<\/p>\n","protected":false},"author":1,"featured_media":1108,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,43],"tags":[8,22,486,487,479,485],"class_list":["post-1109","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","tag-css","tag-css3","tag-fixed-sidebar","tag-position","tag-scroll","tag-sidebar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fixed Sidebar (CSS) - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fixed Sidebar (CSS) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Pada artikel kali ini, kita akan mencoba bagaimana membuat sebuah sidebar, berada tetap (fixed) pada posisinya ketika halaman discroll. Caranya tidak begitu sulit, karena yang akan kita perlukan hanya menambahkan properti css position.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-02T04:26:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg?fit=1200%2C630&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Fixed Sidebar (CSS)\",\"datePublished\":\"2019-01-02T04:26:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/\"},\"wordCount\":99,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fixed.jpg\",\"keywords\":[\"css\",\"css3\",\"fixed sidebar\",\"position\",\"scroll\",\"sidebar\"],\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/\",\"name\":\"Fixed Sidebar (CSS) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fixed.jpg\",\"datePublished\":\"2019-01-02T04:26:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fixed.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fixed.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Fixed Sidebar\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/fixed-sidebar-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fixed Sidebar (CSS)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fixed Sidebar (CSS) - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/","og_locale":"en_GB","og_type":"article","og_title":"Fixed Sidebar (CSS) - YELLOWWEB.ID","og_description":"Pada artikel kali ini, kita akan mencoba bagaimana membuat sebuah sidebar, berada tetap (fixed) pada posisinya ketika halaman discroll. Caranya tidak begitu sulit, karena yang akan kita perlukan hanya menambahkan properti css position.","og_url":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2019-01-02T04:26:55+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg?fit=1200%2C630&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Fixed Sidebar (CSS)","datePublished":"2019-01-02T04:26:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/"},"wordCount":99,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg","keywords":["css","css3","fixed sidebar","position","scroll","sidebar"],"articleSection":["CSS","HTML"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/","url":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/","name":"Fixed Sidebar (CSS) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg","datePublished":"2019-01-02T04:26:55+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2019\/01\/fixed.jpg","width":1200,"height":630,"caption":"Fixed Sidebar"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/fixed-sidebar-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Fixed Sidebar (CSS)"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":1,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1109\/revisions"}],"predecessor-version":[{"id":1110,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1109\/revisions\/1110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1108"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}