{"id":1079,"date":"2018-11-30T10:36:06","date_gmt":"2018-11-30T03:36:06","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1079"},"modified":"2018-11-30T10:36:06","modified_gmt":"2018-11-30T03:36:06","slug":"slide-down-a-bar-on-scroll-javascript","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/","title":{"rendered":"Slide Down a Bar on Scroll (JavaScript)"},"content":{"rendered":"<p>Halo teman-teman setelah kemarin kita mencoba memberikan efek <a href=\"http:\/\/Slide Down a Bar on Scroll\" rel=\"noopener\" target=\"_blank\">Sticky Navigation<\/a> pada sebuah halaman web, sekarang kita akan mencoba efek yang berbeda namun masih sedikit memiliki kemiripan. Efek Slide Down a Bar on Scroll dengan menggunakan JavaScript.<br \/>\n<!--more--><br \/>\nFitur ini akan memunculkan menu atau navigasi ketika kita melakukan gulir (scroll) halaman web. Menarik bukan, teman-teman bisa mencobanya lho, silahkan dicoba potongan-potongan skrip kode berikut:<\/p>\n<p>Kita mulai dengan membuat bagian tag body, dengan skrip berikut ini:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;div id=\"navbar\"&gt;\r\n  &lt;a href=\"#home\"&gt;Home&lt;\/a&gt;\r\n  &lt;a href=\"#news\"&gt;News&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 style=\"padding:15px 15px 2500px;font-size:30px\"&gt;\r\n  &lt;p&gt;&lt;b&gt;This example demonstrates how to slide down a navbar when the user starts to scroll the page.&lt;\/b&gt;&lt;\/p&gt;\r\n  &lt;p&gt;Scroll down this frame to see the effect!&lt;\/p&gt;\r\n  &lt;p&gt;Scroll to the top to hide the navbar.&lt;\/p&gt;\r\n  &lt;p&gt;Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;\/p&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>skrip diatas bisa teman-teman tempatkan pada bagian tag body, kemudian kita akan coba melanjutkan pada bagian cssnya dengan memberikan skrip berikut:<\/p>\n<pre class=\"lang:default decode:true \" >body {\r\n  margin: 0;\r\n  background-color: #f1f1f1;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n#navbar {\r\n  background-color: #333;\r\n  position: fixed;\r\n  top: -50px;\r\n  width: 100%;\r\n  display: block;\r\n  transition: top 0.3s;\r\n}\r\n\r\n#navbar a {\r\n  float: left;\r\n  display: block;\r\n  color: #f2f2f2;\r\n  text-align: center;\r\n  padding: 15px;\r\n  text-decoration: none;\r\n  font-size: 17px;\r\n}\r\n\r\n#navbar a:hover {\r\n  background-color: #ddd;\r\n  color: black;\r\n}<\/pre>\n<p>Jangan lupa untuk menambahkan skrip JavaScript sebagai pemicu atau aktivasinya, skripnya teman-teman bisa lihat seperti yang ada dibawah ini:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;script&gt;\r\n\/\/ When the user scrolls down 20px from the top of the document, slide down the navbar\r\nwindow.onscroll = function() {scrollFunction()};\r\n\r\nfunction scrollFunction() {\r\n  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {\r\n    document.getElementById(\"navbar\").style.top = \"0\";\r\n  } else {\r\n    document.getElementById(\"navbar\").style.top = \"-50px\";\r\n  }\r\n}\r\n&lt;\/script&gt;<\/pre>\n<p>Jadi terdapat 3 bagian yang harus teman-teman buat, diantaranya bagian body, css dan javascript.<br \/>\nUntuk hasil akhirnya akan terlihat seperti berikut:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/689L1hp2\/2\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Halo teman-teman setelah kemarin kita mencoba memberikan efek Sticky Navigation pada sebuah halaman web, sekarang kita akan mencoba efek yang berbeda namun masih sedikit memiliki kemiripan. Efek Slide Down a Bar on Scroll dengan menggunakan JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":1082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283],"tags":[156,478,477,476,326],"class_list":["post-1079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-scroll-menu","tag-scroll-navigation","tag-sticky","tag-sticky-menu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Slide Down a Bar on Scroll (JavaScript) - 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\/slide-down-a-bar-on-scroll-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slide Down a Bar on Scroll (JavaScript) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Halo teman-teman setelah kemarin kita mencoba memberikan efek Sticky Navigation pada sebuah halaman web, sekarang kita akan mencoba efek yang berbeda namun masih sedikit memiliki kemiripan. Efek Slide Down a Bar on Scroll dengan menggunakan JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-30T03:36:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg?fit=600%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\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\\\/slide-down-a-bar-on-scroll-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Slide Down a Bar on Scroll (JavaScript)\",\"datePublished\":\"2018-11-30T03:36:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/\"},\"wordCount\":140,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/scroll.jpg\",\"keywords\":[\"javascript\",\"scroll menu\",\"scroll navigation\",\"sticky\",\"sticky menu\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/\",\"name\":\"Slide Down a Bar on Scroll (JavaScript) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/scroll.jpg\",\"datePublished\":\"2018-11-30T03:36:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/scroll.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/scroll.jpg\",\"width\":600,\"height\":290,\"caption\":\"Slide Down Menu Bar\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/slide-down-a-bar-on-scroll-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slide Down a Bar on Scroll (JavaScript)\"}]},{\"@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":"Slide Down a Bar on Scroll (JavaScript) - 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\/slide-down-a-bar-on-scroll-javascript\/","og_locale":"en_GB","og_type":"article","og_title":"Slide Down a Bar on Scroll (JavaScript) - YELLOWWEB.ID","og_description":"Halo teman-teman setelah kemarin kita mencoba memberikan efek Sticky Navigation pada sebuah halaman web, sekarang kita akan mencoba efek yang berbeda namun masih sedikit memiliki kemiripan. Efek Slide Down a Bar on Scroll dengan menggunakan JavaScript.","og_url":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-11-30T03:36:06+00:00","og_image":[{"width":600,"height":290,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg?fit=600%2C290&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\/slide-down-a-bar-on-scroll-javascript\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Slide Down a Bar on Scroll (JavaScript)","datePublished":"2018-11-30T03:36:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/"},"wordCount":140,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg","keywords":["javascript","scroll menu","scroll navigation","sticky","sticky menu"],"articleSection":["JavaScript"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/","url":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/","name":"Slide Down a Bar on Scroll (JavaScript) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg","datePublished":"2018-11-30T03:36:06+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/11\/scroll.jpg","width":600,"height":290,"caption":"Slide Down Menu Bar"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Slide Down a Bar on Scroll (JavaScript)"}]},{"@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\/1079","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=1079"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1079\/revisions"}],"predecessor-version":[{"id":1081,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1079\/revisions\/1081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1082"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}