{"id":28359,"date":"2022-12-30T12:12:14","date_gmt":"2022-12-30T06:42:14","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/"},"modified":"2022-12-30T12:12:14","modified_gmt":"2022-12-30T06:42:14","slug":"solved-changing-background-color-of-fixed-block-at-every-new-screen","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/","title":{"rendered":"[Solved] Changing background-color of fixed block at every new screen"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-49670114\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"49670114\" data-parentid=\"49669833\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You can change the background color of that fixed div by using the <code>index<\/code> or <code>anchorLink<\/code> <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/alvarotrigo\/fullPage.js#options\">option in fullpage.js<\/a><\/strong>.<\/p>\n<p>To change the css you can use <code>onLeave()<\/code> or <code>afterLoad()<\/code> method to call the function<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>$(document).ready(function() {\r\n  $('#fullpage').fullpage({\r\n    onLeave: function(anchorLink, index) {\r\n      \/\/using index\r\n      if (index == 1) {\r\n        $(\".fixed\").css(\"background-color\", \"black\");\r\n      }\r\n      if (index == 2) {\r\n        $(\".fixed\").css(\"background-color\", \"blue\");\r\n      }\r\n      if (index == 3) {\r\n        $(\".fixed\").css(\"background-color\", \"red\");\r\n      }\r\n    }\r\n  });\r\n});<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>body {\r\n  margin: 0;\r\n}\r\n\r\n.fixed {\r\n  width: 25%;\r\n  height: calc(100vh - 50px);\r\n  background-color: #000;\r\n  margin: 25px;\r\n  float: left;\r\n  position: fixed;\r\n  z-index: 1;\r\n}\r\n\r\n.section {\r\n  width: 100%;\r\n  height: 100vh;\r\n  background-color: pink;\r\n}\r\n\r\n.section:nth-of-type(2) {\r\n  background-color: green;\r\n}\r\n\r\n.section:last-of-type {\r\n  background-color: blue;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullPage.js\/2.9.6\/jquery.fullpage.min.js\"&gt;&lt;\/script&gt;\r\n&lt;div class=\"fixed\"&gt;&lt;\/div&gt;\r\n&lt;div id=\"fullpage\"&gt;\r\n  &lt;div class=\"section\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"section\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"section\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/bhuwanb9\/pen\/OvoqPj\">Updated Codepen<\/a><\/strong><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">0<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Changing background-color of fixed block at every new screen <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You can change the background color of that fixed div by using the index or anchorLink option in fullpage.js. To change the css you can use onLeave() or afterLoad() method to call the function $(document).ready(function() { $(&#8216;#fullpage&#8217;).fullpage({ onLeave: function(anchorLink, index) { \/\/using index if (index == 1) { $(&#8220;.fixed&#8221;).css(&#8220;background-color&#8221;, &#8220;black&#8221;); } if (index == &#8230; <a title=\"[Solved] Changing background-color of fixed block at every new screen\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\" aria-label=\"More on [Solved] Changing background-color of fixed block at every new screen\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,5548,333,388],"class_list":["post-28359","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-fullpage-js","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Changing background-color of fixed block at every new screen - JassWeb<\/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:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Changing background-color of fixed block at every new screen - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can change the background color of that fixed div by using the index or anchorLink option in fullpage.js. To change the css you can use onLeave() or afterLoad() method to call the function $(document).ready(function() { $(&#039;#fullpage&#039;).fullpage({ onLeave: function(anchorLink, index) { \/\/using index if (index == 1) { $(&quot;.fixed&quot;).css(&quot;background-color&quot;, &quot;black&quot;); } if (index == ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-30T06:42:14+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Changing background-color of fixed block at every new screen\",\"datePublished\":\"2022-12-30T06:42:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\"},\"wordCount\":55,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"fullpage.js\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\",\"name\":\"[Solved] Changing background-color of fixed block at every new screen - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-30T06:42:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Changing background-color of fixed block at every new screen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Changing background-color of fixed block at every new screen - JassWeb","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:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Changing background-color of fixed block at every new screen - JassWeb","og_description":"[ad_1] You can change the background color of that fixed div by using the index or anchorLink option in fullpage.js. To change the css you can use onLeave() or afterLoad() method to call the function $(document).ready(function() { $('#fullpage').fullpage({ onLeave: function(anchorLink, index) { \/\/using index if (index == 1) { $(\".fixed\").css(\"background-color\", \"black\"); } if (index == ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/","og_site_name":"JassWeb","article_published_time":"2022-12-30T06:42:14+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Changing background-color of fixed block at every new screen","datePublished":"2022-12-30T06:42:14+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/"},"wordCount":55,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","fullpage.js","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/","url":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/","name":"[Solved] Changing background-color of fixed block at every new screen - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-30T06:42:14+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-changing-background-color-of-fixed-block-at-every-new-screen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Changing background-color of fixed block at every new screen"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=28359"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28359\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=28359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=28359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=28359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}