{"id":998,"date":"2018-06-03T13:07:26","date_gmt":"2018-06-03T06:07:26","guid":{"rendered":"https:\/\/www.yellowweb.id\/blog\/?p=998"},"modified":"2018-06-03T13:07:26","modified_gmt":"2018-06-03T06:07:26","slug":"changing-header-background-colour-on-scroll-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/","title":{"rendered":"Changing Header Background Colour on Scroll (jQuery)"},"content":{"rendered":"<p>Mungkin teman-teman pernah menjumpai sebuah web, ketika halaman web tersebut kita gulir (scroll) ke bawah, background pada bagian header atau navigasi akan berubah warnanya. Kita dapat mencoba membuat efek seperti itu dengan menggunakan <a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a>, agar web yang kita buat lebih menarik tentunya :).<br \/>\n<!--more--><\/p>\n<p>Langkahnya sebagai berikut, namun sebelumnya disini kita akan bagi dulu perbagian untuk skripnya pada bagian tag head dan body dengan tujuan supaya memudahkan kita saat membaca skrip, kemudian skrip keseluruhan dan demonya ada pada bagian paling bawah artikel ini.<\/p>\n<p>Buat file dengan nama<strong> index.html<\/strong>, kemudian isikan dengan menuliskan skrip kode berikut:<\/p>\n<p>pada bagian <code>tag head<\/code><\/p>\n<pre class=\"lang:default decode:true \">&lt;head&gt;\r\n\t&lt;title&gt;Changing Header Background Colour on Scroll (jQuery) | Kursus Web YELLOWWEB.ID&lt;\/title&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n\t&lt;style type=\"text\/css\"&gt;\r\n\t\t@import url('https:\/\/fonts.googleapis.com\/css?family=Abril+Fatface');\r\n\r\n\t\t* {\r\n\t\t\tmargin:0;\r\n\t\t\tpadding:0\r\n\t\t}\r\n\r\n\t\thtml {\r\n\t\t\tfont-family: 'Abril Fatface', cursive;\r\n\t\t    background: lightgray;\r\n\t\t    height: 5000px;\r\n\t\t}\r\n\r\n\t\t.header {\r\n\t\t    position: fixed;\r\n\t\t    top: 0;\r\n\t\t    left: 0;\r\n\t\t    width: 100%;\r\n\t\t    padding: 0;\r\n\t\t    z-index: 10000;\r\n\t\t    transition: all 0.2s ease-in-out;\r\n\t\t    height: auto;\r\n\t\t    background-color:purple;  \r\n\t\t    \r\n\t\t    text-align: center;\r\n\t\t    line-height: 40px;\r\n\t\t    font-size: 50px;\r\n\t\t    padding: 50px 0;\r\n\t\t}\r\n\r\n\t\t.header.active {\r\n\t\t    background: #033958;\r\n\t\t    \/*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t    \/*-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t    \/*box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t}\r\n\t\t\r\n\t\t.visit{\r\n\t\t\tmargin-top: 100px;\r\n\t\t}\r\n\r\n\t&lt;\/style&gt;\r\n\t&lt;!-- &lt;script type=\"text\/javascript\" src=\"jquery-3.3.1.js\"&gt;&lt;\/script&gt; --&gt;\r\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"&gt;&lt;\/script&gt; \r\n\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\t\t$(window).on(\"scroll\", function(){\r\n\t\t\tif($(window).scrollTop() &gt; 50){\r\n\t\t\t\t$(\".header\").addClass(\"active\");\r\n\t\t\t} else {\r\n\t\t\t\t$(\".header\").removeClass(\"active\");\r\n\t\t\t}\r\n\t\t});\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;<\/pre>\n<p>disana memang terlihat panjang sekali, karena <code>JavaScript<\/code> dengan <code>CSS<\/code> kita jadikan satu.<\/p>\n<p>untuk bagian <code>tag body<\/code><\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"header\"&gt;Belajar Sticky&lt;\/div&gt;\r\n\t&lt;div class=\"visit\"&gt;\r\n\t\t&lt;p&gt;&lt;i class=\"fa fa-hand-o-right fa-fw\"&gt;&lt;\/i&gt;&lt;a target=\"_blank\" href=\"http:\/\/www.yellowweb.id\/blog\"&gt;Untuk tutorial lainnya silahkan kunjungi blog kami di www.yellowweb.id\/blog&lt;\/a&gt;&lt;\/p&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<p>Yang perlu kita perhatikan adalah bagian JavaScript \/ jQuerynya, perlu kita garis bawahi disini kita menggunakan <a href=\"https:\/\/developers.google.com\/speed\/libraries\/#jquery\" target=\"_blank\" rel=\"noopener\">jQuery CDN<\/a> milik google dengan versi <a href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\" target=\"_blank\" rel=\"noopener\">jQuery 2.x.x<\/a><\/p>\n<pre class=\"lang:default decode:true \">&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Aktivasinya<\/p>\n<pre class=\"lang:default decode:true \">&lt;script type=\"text\/javascript\"&gt;\r\n\t\t$(window).on(\"scroll\", function(){\r\n\t\t\tif($(window).scrollTop() &gt; 50){\r\n\t\t\t\t$(\".header\").addClass(\"active\");\r\n\t\t\t} else {\r\n\t\t\t\t$(\".header\").removeClass(\"active\");\r\n\t\t\t}\r\n\t\t});\r\n\t&lt;\/script&gt;<\/pre>\n<p>Untuk kodingan lengkapnya bila kita jadikan satu, maka akan seperti berikut ini:<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Changing Header Background Colour on Scroll (jQuery) | Kursus Web YELLOWWEB.ID&lt;\/title&gt;\r\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/stackpath.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n\t&lt;style type=\"text\/css\"&gt;\r\n\t\t@import url('https:\/\/fonts.googleapis.com\/css?family=Abril+Fatface');\r\n\r\n\t\t* {\r\n\t\t\tmargin:0;\r\n\t\t\tpadding:0\r\n\t\t}\r\n\r\n\t\thtml {\r\n\t\t\tfont-family: 'Abril Fatface', cursive;\r\n\t\t    background: lightgray;\r\n\t\t    height: 5000px;\r\n\t\t}\r\n\r\n\t\t.header {\r\n\t\t    position: fixed;\r\n\t\t    top: 0;\r\n\t\t    left: 0;\r\n\t\t    width: 100%;\r\n\t\t    padding: 0;\r\n\t\t    z-index: 10000;\r\n\t\t    transition: all 0.2s ease-in-out;\r\n\t\t    height: auto;\r\n\t\t    background-color:purple;  \r\n\t\t    \r\n\t\t    text-align: center;\r\n\t\t    line-height: 40px;\r\n\t\t    font-size: 50px;\r\n\t\t    padding: 50px 0;\r\n\t\t}\r\n\r\n\t\t.header.active {\r\n\t\t    background: #033958;\r\n\t\t    \/*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t    \/*-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t    \/*box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*\/\r\n\t\t}\r\n\t\t\r\n\t\t.visit{\r\n\t\t\tmargin-top: 100px;\r\n\t\t}\r\n\r\n\t&lt;\/style&gt;\r\n\t&lt;!-- &lt;script type=\"text\/javascript\" src=\"jquery-3.3.1.js\"&gt;&lt;\/script&gt; --&gt;\r\n\t&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"&gt;&lt;\/script&gt; \r\n\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\t\t$(window).on(\"scroll\", function(){\r\n\t\t\tif($(window).scrollTop() &gt; 50){\r\n\t\t\t\t$(\".header\").addClass(\"active\");\r\n\t\t\t} else {\r\n\t\t\t\t$(\".header\").removeClass(\"active\");\r\n\t\t\t}\r\n\t\t});\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div class=\"header\"&gt;Belajar Sticky&lt;\/div&gt;\r\n\t&lt;div class=\"visit\"&gt;\r\n\t\t&lt;p&gt;&lt;i class=\"fa fa-hand-o-right fa-fw\"&gt;&lt;\/i&gt;&lt;a target=\"_blank\" href=\"http:\/\/www.yellowweb.id\/blog\"&gt;Untuk tutorial lainnya silahkan kunjungi blog kami di www.yellowweb.id\/blog&lt;\/a&gt;&lt;\/p&gt;\r\n\t&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/miftahfs\/00ptrnhf\/6\/embedded\/\" allowpaymentrequest allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mungkin teman-teman pernah menjumpai sebuah web, ketika halaman web tersebut kita gulir (scroll) ke bawah, background pada bagian header atau navigasi akan berubah warnanya. Kita dapat mencoba membuat efek seperti itu dengan menggunakan jQuery, agar web yang kita buat lebih menarik tentunya :).<\/p>\n","protected":false},"author":1,"featured_media":1004,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283,116],"tags":[445,156,18,324,117,446,443,444],"class_list":["post-998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-fixed-header","tag-javascript","tag-jquery","tag-navigasi","tag-plugin","tag-static-header","tag-static-menu","tag-static-navbar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Changing Header Background Colour on Scroll (jQuery) - 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\/changing-header-background-colour-on-scroll-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Changing Header Background Colour on Scroll (jQuery) - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Mungkin teman-teman pernah menjumpai sebuah web, ketika halaman web tersebut kita gulir (scroll) ke bawah, background pada bagian header atau navigasi akan berubah warnanya. Kita dapat mencoba membuat efek seperti itu dengan menggunakan jQuery, agar web yang kita buat lebih menarik tentunya :).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-03T06:07:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg?fit=2500%2C1208&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"2500\" \/>\n\t<meta property=\"og:image:height\" content=\"1208\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Changing Header Background Colour on Scroll (jQuery)\",\"datePublished\":\"2018-06-03T06:07:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/\"},\"wordCount\":152,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/navbar-01.jpg\",\"keywords\":[\"fixed header\",\"javascript\",\"jquery\",\"navigasi\",\"plugin\",\"static header\",\"static menu\",\"static navbar\"],\"articleSection\":[\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/\",\"name\":\"Changing Header Background Colour on Scroll (jQuery) - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/navbar-01.jpg\",\"datePublished\":\"2018-06-03T06:07:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/navbar-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/navbar-01.jpg\",\"width\":2500,\"height\":1208,\"caption\":\"Fixed Header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/changing-header-background-colour-on-scroll-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Changing Header Background Colour on Scroll (jQuery)\"}]},{\"@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":"Changing Header Background Colour on Scroll (jQuery) - 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\/changing-header-background-colour-on-scroll-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Changing Header Background Colour on Scroll (jQuery) - YELLOWWEB.ID","og_description":"Mungkin teman-teman pernah menjumpai sebuah web, ketika halaman web tersebut kita gulir (scroll) ke bawah, background pada bagian header atau navigasi akan berubah warnanya. Kita dapat mencoba membuat efek seperti itu dengan menggunakan jQuery, agar web yang kita buat lebih menarik tentunya :).","og_url":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2018-06-03T06:07:26+00:00","og_image":[{"width":2500,"height":1208,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg?fit=2500%2C1208&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Changing Header Background Colour on Scroll (jQuery)","datePublished":"2018-06-03T06:07:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/"},"wordCount":152,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg","keywords":["fixed header","javascript","jquery","navigasi","plugin","static header","static menu","static navbar"],"articleSection":["JavaScript","jQuery"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/","url":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/","name":"Changing Header Background Colour on Scroll (jQuery) - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg","datePublished":"2018-06-03T06:07:26+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2018\/06\/navbar-01.jpg","width":2500,"height":1208,"caption":"Fixed Header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/changing-header-background-colour-on-scroll-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Changing Header Background Colour on Scroll (jQuery)"}]},{"@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\/998","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=998"}],"version-history":[{"count":5,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/998\/revisions"}],"predecessor-version":[{"id":1003,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/998\/revisions\/1003"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/1004"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}