{"id":1097,"date":"2018-12-23T20:13:48","date_gmt":"2018-12-23T13:13:48","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=1097"},"modified":"2018-12-23T20:30:38","modified_gmt":"2018-12-23T13:30:38","slug":"hide-menu-on-scroll","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/","title":{"rendered":"Hide Menu on Scroll"},"content":{"rendered":"<p>Berbeda dengan tutorial yang <a href=\"https:\/\/www.yellowweb.id\/blog\/slide-down-a-bar-on-scroll-javascript\/\" rel=\"noopener\" target=\"_blank\">sebelumnya<\/a>, untuk artikel kali ini masih seputar navigasi menu kita akan mencoba membuat teknik hide menu on scroll, jadi teknik ini akan memberikan efek pada navigasi menu jika kita melakukan scroll halaman kebawah, maka navigasi menu tersebut akan hilang, namun sebaliknya jika kita melakukan scroll keatas maka navigasi menu akan terlihat kembali.<\/p>\n<p><!--more--><\/p>\n<p>Tahapannya adalah buat file index.html, kemudian padukan dengan beberapa css dan javascript, langsung saja lihat potongan-potongan skrip berikut:<\/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;margin-top:30px;\"&gt;\r\n  &lt;p&gt;&lt;b&gt;This example demonstrates how to hide 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 up to show 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;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>lalu lanjutkan dengan menambahkan skrip kode untuk css-nya, sebagai 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: 0;\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>tinggal untuk menjalankannya, disini kita tambahkan javascript, bisa dilihat disini:<\/p>\n<pre class=\"lang:default decode:true \" >var prevScrollpos = window.pageYOffset;\r\nwindow.onscroll = function() {\r\nvar currentScrollPos = window.pageYOffset;\r\n  if (prevScrollpos &gt; currentScrollPos) {\r\n    document.getElementById(\"navbar\").style.top = \"0\";\r\n  } else {\r\n    document.getElementById(\"navbar\").style.top = \"-50px\";\r\n  }\r\n  prevScrollpos = currentScrollPos;\r\n}<\/pre>\n<p>Untuk hasil akhirnya, nanti kita akan dapati seperti pada tampilan dibawah ini:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/352uhn4w\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Berbeda dengan tutorial yang sebelumnya, untuk artikel kali ini masih seputar navigasi menu kita akan mencoba membuat teknik hide menu on scroll, jadi teknik ini akan memberikan efek pada navigasi menu jika kita melakukan scroll halaman kebawah, maka navigasi menu tersebut akan hilang, namun sebaliknya jika kita melakukan scroll keatas maka navigasi menu akan terlihat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1099,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283],"tags":[481,156,18,324,480,478,326],"class_list":["post-1097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-hide-menu","tag-javascript","tag-jquery","tag-navigasi","tag-navigation","tag-scroll-menu","tag-sticky-menu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hide Menu on Scroll - 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\/hide-menu-on-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hide Menu on Scroll - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Berbeda dengan tutorial yang sebelumnya, untuk artikel kali ini masih seputar navigasi menu kita akan mencoba membuat teknik hide menu on scroll, jadi teknik ini akan memberikan efek pada navigasi menu jika kita melakukan scroll halaman kebawah, maka navigasi menu tersebut akan hilang, namun sebaliknya jika kita melakukan scroll keatas maka navigasi menu akan terlihat [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-23T13:13:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-23T13:30:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.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\\\/hide-menu-on-scroll\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Hide Menu on Scroll\",\"datePublished\":\"2018-12-23T13:13:48+00:00\",\"dateModified\":\"2018-12-23T13:30:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/\"},\"wordCount\":111,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/hide-menu.jpg\",\"keywords\":[\"hide menu\",\"javascript\",\"jquery\",\"navigasi\",\"navigation\",\"scroll menu\",\"sticky menu\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/\",\"name\":\"Hide Menu on Scroll - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/hide-menu.jpg\",\"datePublished\":\"2018-12-23T13:13:48+00:00\",\"dateModified\":\"2018-12-23T13:30:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/hide-menu.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/hide-menu.jpg\",\"width\":1200,\"height\":630,\"caption\":\"hide-menu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/hide-menu-on-scroll\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hide Menu on Scroll\"}]},{\"@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":"Hide Menu on Scroll - 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\/hide-menu-on-scroll\/","og_locale":"en_GB","og_type":"article","og_title":"Hide Menu on Scroll - YELLOWWEB.ID","og_description":"Berbeda dengan tutorial yang sebelumnya, untuk artikel kali ini masih seputar navigasi menu kita akan mencoba membuat teknik hide menu on scroll, jadi teknik ini akan memberikan efek pada navigasi menu jika kita melakukan scroll halaman kebawah, maka navigasi menu tersebut akan hilang, namun sebaliknya jika kita melakukan scroll keatas maka navigasi menu akan terlihat [&hellip;]","og_url":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-12-23T13:13:48+00:00","article_modified_time":"2018-12-23T13:30:38+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.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\/hide-menu-on-scroll\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Hide Menu on Scroll","datePublished":"2018-12-23T13:13:48+00:00","dateModified":"2018-12-23T13:30:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/"},"wordCount":111,"commentCount":0,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.jpg","keywords":["hide menu","javascript","jquery","navigasi","navigation","scroll menu","sticky menu"],"articleSection":["JavaScript"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/","url":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/","name":"Hide Menu on Scroll - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.jpg","datePublished":"2018-12-23T13:13:48+00:00","dateModified":"2018-12-23T13:30:38+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/12\/hide-menu.jpg","width":1200,"height":630,"caption":"hide-menu"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/hide-menu-on-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Hide Menu on Scroll"}]},{"@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\/1097","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=1097"}],"version-history":[{"count":4,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1097\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/1097\/revisions\/1102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1099"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=1097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=1097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=1097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}