{"id":85876,"date":"2026-03-02T17:42:15","date_gmt":"2026-03-02T17:42:15","guid":{"rendered":"https:\/\/demos.restored316.com\/creator-cloud\/?post_type=kadence_cloud&#038;p=85876"},"modified":"2026-04-01T16:25:18","modified_gmt":"2026-04-01T16:25:18","slug":"sticky-scrolling","status":"publish","type":"kadence_cloud","link":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/","title":{"rendered":"Sticky scrolling"},"content":{"rendered":"\n<script>\n(function () {\n  function getOffsetTopFromDoc(el) {\n    const r = el.getBoundingClientRect();\n    return r.top + window.scrollY;\n  }\n\n  function initSIL(wrap) {\n    const pairs = [...wrap.querySelectorAll(\".sil__pair\")];\n    const images = pairs.map(p => p.querySelector(\".sil__image\")).filter(Boolean);\n    const contents = pairs.map(p => p.querySelector(\".sil__content\")).filter(Boolean);\n\n    if (!images.length || !contents.length) return;\n\n    document.documentElement.classList.add(\"js\");\n    wrap.dataset.currentIndex = wrap.dataset.currentIndex || \"1\";\n\n    \/\/ Create (or reuse) the pinned stage\n    let stage = wrap.querySelector(\".sil__stage\");\n    if (!stage) {\n      stage = document.createElement(\"div\");\n      stage.className = \"sil__stage\";\n      wrap.appendChild(stage);\n    }\n\n    \/\/ Clone content panels into the stage\n    stage.innerHTML = \"\";\n    contents.forEach((c) => stage.appendChild(c.cloneNode(true)));\n\n    \/\/ ----------------------------\n    \/\/ SMOOTHING + MEASURE CACHE\n    \/\/ ----------------------------\n    let measured = {\n      left: 0,\n      width: 0,\n      contentHeight: 0,\n      topImgMid: 0,\n      botImgMid: 0\n    };\n\n    \/\/ Hysteresis to prevent flip-flop\n    let activeIndex = parseInt(wrap.dataset.currentIndex || \"1\", 10);\n    let activeDistance = Number.MAX_VALUE;\n\n    \/\/ rAF scheduling so we don't do layout thrash mid-scroll\n    let rafScroll = null;\n    let rafY = null;\n\n    function isMobile() {\n      return window.matchMedia(\"(max-width: 767.98px)\").matches;\n    }\n\n    function viewportMidY() {\n      return window.scrollY + window.innerHeight \/ 2;\n    }\n\n    function distanceFromViewportMiddle(el) {\n      const elMidY = getOffsetTopFromDoc(el) + el.clientHeight \/ 2;\n      return Math.abs(viewportMidY() - elMidY);\n    }\n\n    function measure() {\n      if (isMobile()) return;\n\n      \/\/ Align stage to RIGHT column of first content\n      const firstContent = contents[0];\n      const bcr = firstContent.getBoundingClientRect();\n\n      \/\/ Cache x\/width (round to prevent subpixel jitter)\n      measured.left = Math.round(bcr.left);\n      measured.width = Math.round(bcr.width);\n\n      \/\/ Cache stage height (also rounded)\n      measured.contentHeight = Math.round(stage.getBoundingClientRect().height);\n\n      \/\/ Cache image midpoint boundaries (doc coords)\n      const firstImgBcr = images[0].getBoundingClientRect();\n      measured.topImgMid = firstImgBcr.top + window.scrollY + firstImgBcr.height \/ 2;\n\n      const lastImgBcr = images[images.length - 1].getBoundingClientRect();\n      measured.botImgMid = lastImgBcr.top + window.scrollY + lastImgBcr.height \/ 2;\n\n      \/\/ Set X + width once per measure (not on every scroll)\n      wrap.style.setProperty(\"--sil-content-offset-x\", measured.left + \"px\");\n      wrap.style.setProperty(\"--sil-content-width\", measured.width + \"px\");\n    }\n\n    function updateY() {\n      if (isMobile()) {\n        wrap.style.removeProperty(\"--sil-content-position\");\n        wrap.style.removeProperty(\"--sil-content-offset-x\");\n        wrap.style.removeProperty(\"--sil-content-offset-y\");\n        wrap.style.removeProperty(\"--sil-content-width\");\n        return;\n      }\n\n      \/\/ Always fixed on desktop like your original\n      wrap.style.setProperty(\"--sil-content-position\", \"fixed\");\n\n      const mid = viewportMidY();\n\n      \/\/ Clamp the pinned box between first\/last image midpoints\n      let y;\n      if (mid < measured.topImgMid) {\n        y = (measured.topImgMid - window.scrollY) - measured.contentHeight \/ 2;\n      } else if (mid > measured.botImgMid) {\n        y = (measured.botImgMid - window.scrollY) - measured.contentHeight \/ 2;\n      } else {\n        y = window.innerHeight \/ 2 - measured.contentHeight \/ 2;\n      }\n\n      \/\/ Round Y to prevent shimmer\n      wrap.style.setProperty(\"--sil-content-offset-y\", Math.round(y) + \"px\");\n    }\n\n    function handleScroll() {\n      \/\/ Your \"always start at 1 near top\" guard\n      const sectionTop = wrap.getBoundingClientRect().top;\n      if (sectionTop > -50) {\n        wrap.dataset.currentIndex = \"1\";\n        activeIndex = 1;\n        activeDistance = Number.MAX_VALUE;\n        return;\n      }\n\n      \/\/ Find closest image to viewport middle\n      let closestIndex = 1;\n      let closestDistance = Number.MAX_VALUE;\n\n      images.forEach((el, idx) => {\n        const d = distanceFromViewportMiddle(el);\n        if (d < closestDistance) {\n          closestDistance = d;\n          closestIndex = idx + 1;\n        }\n      });\n\n      \/\/ Hysteresis: only switch if \"meaningfully closer\"\n      if (closestIndex !== activeIndex) {\n        const improvement = activeDistance - closestDistance;\n        if (improvement > 35) { \/\/ tweak 20\u201360\n          activeIndex = closestIndex;\n          activeDistance = closestDistance;\n        }\n      } else {\n        activeDistance = closestDistance;\n      }\n\n      wrap.dataset.currentIndex = String(activeIndex);\n    }\n\n    function onScroll() {\n      if (rafScroll) return;\n      rafScroll = requestAnimationFrame(() => {\n        rafScroll = null;\n        handleScroll();\n      });\n\n      if (rafY) return;\n      rafY = requestAnimationFrame(() => {\n        rafY = null;\n        updateY();\n      });\n    }\n\n    function onResize() {\n      \/\/ Re-measure + re-position\n      if (isMobile()) return;\n      measure();\n      updateY();\n      handleScroll();\n    }\n\n    \/\/ Initial run (order matters)\n    if (!isMobile()) {\n      measure();\n      updateY();\n    }\n    handleScroll();\n\n    \/\/ Listeners\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onResize);\n\n    \/\/ Optional: click image scroll-to-center\n    images.forEach((img) => {\n      img.style.cursor = \"pointer\";\n      img.addEventListener(\"click\", () => {\n        const midOffset = (window.innerHeight - img.clientHeight) \/ 2;\n        window.scrollTo({\n          top: getOffsetTopFromDoc(img) - midOffset,\n          behavior: \"smooth\",\n        });\n      });\n    });\n\n    \/\/ Re-measure once images finish loading (prevents early jump)\n    setTimeout(onResize, 150);\n    setTimeout(onResize, 400);\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    document.querySelectorAll(\".sil\").forEach(initSIL);\n  });\n})();\n<\/script>\n\n\n<style>.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{padding-top:var(--global-kb-spacing-md, 2rem);padding-right:var(--global-kb-spacing-md, 2rem);padding-bottom:var(--global-kb-spacing-md, 2rem);padding-left:var(--global-kb-spacing-md, 2rem);}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col,.kadence-column85876_b5288f-b1 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{background-color:#f8eb59;}.kadence-column85876_b5288f-b1 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_b5288f-b1, .kadence-column85876_b5288f-b1 h1, .kadence-column85876_b5288f-b1 h2, .kadence-column85876_b5288f-b1 h3, .kadence-column85876_b5288f-b1 h4, .kadence-column85876_b5288f-b1 h5, .kadence-column85876_b5288f-b1 h6{color:#000000;}.kadence-column85876_b5288f-b1 a{color:#000000;}.kadence-column85876_b5288f-b1{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_b5288f-b1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_b5288f-b1 kvs-lg-false kvs-md-false kvs-sm-false\"><div class=\"kt-inside-inner-col\">\n<p>The Above Javascript is needed in order for this block to work properly. <a href=\"https:\/\/shop.restored316designs.com\/courses\/creator-cloud\/lessons\/how-to-add-javascript-to-your-site\/\">You will follow these instruction<\/a> and once done you can delete this yellow box and the Custom HTML block above.<br><br>This block is also NOT meant to be positioned higher on the page as the viewport height is an important part of the code on this block.  <\/p>\n<\/div><\/div>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-85876_66a1d1-79 .kt-block-spacer{height:600px;}.wp-block-kadence-spacer.kt-block-spacer-85876_66a1d1-79 .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-85876_66a1d1-79\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><\/div><\/div>\n\n\n<style>.kb-row-layout-id85876_742515-20 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id85876_742515-20 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id85876_742515-20 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-xxl, 5rem);padding-bottom:var(--global-kb-spacing-xxl, 5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id85876_742515-20 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id85876_742515-20 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id85876_742515-20 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}\/* ===== SIL paired layout ===== *\/.sil { position: relative; }@media (min-width: 768px) {  html.js .sil .sil__image {    opacity: 0.25;    transition: opacity 500ms ease;  }  \/* We will create ONE pinned \"stage\" that displays the active content *\/  html.js .sil .sil__stage {    position: var(--sil-content-position, fixed);    top: 0;    left: 0;    width: var(--sil-content-width, 480px);    transform: translate(var(--sil-content-offset-x, 0), var(--sil-content-offset-y, 0));    z-index: 10;    pointer-events: auto;  }  \/* The stage contains cloned content panels layered *\/  html.js .sil .sil__stage .sil__content {    visibility: var(--sil-content-visibility, hidden);    opacity: 0;    transition: opacity 400ms ease var(--sil-content-fade-delay, 0s),                visibility 400ms ease var(--sil-content-fade-delay, 0s);  }  html.js .sil .sil__stage .sil__content:not(:first-child) {    position: absolute;    top: 0;    left: 0;    width: 100%;  }  \/* Hide the ORIGINAL right-column contents on desktop (we'll show them in the stage) *\/  html.js .sil .sil__pair .sil__content {    visibility: hidden;  }}\/* Active panel visible in stage *\/.sil[data-current-index=\"1\"] .sil__stage #sil-content-1,.sil[data-current-index=\"2\"] .sil__stage #sil-content-2,.sil[data-current-index=\"3\"] .sil__stage #sil-content-3 {  --sil-content-fade-delay: 200ms;  --sil-content-visibility: visible;  opacity: 1;}\/* Active image bright *\/@media (min-width: 768px) {  .sil[data-current-index=\"1\"] #sil-img-1,  .sil[data-current-index=\"2\"] #sil-img-2,  .sil[data-current-index=\"3\"] #sil-img-3 {    opacity: 1;  }}\/* Mobile: no stage, show original content normally *\/@media (max-width: 767.98px) {  .sil .sil__stage { display: none !important; }  .sil .sil__pair .sil__content { visibility: visible !important; }  .sil .sil__image { opacity: 1 !important; }}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id85876_742515-20 alignfull has-theme-palette8-background-color kt-row-has-bg sil wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kb-theme-content-width\">\n<style>.kadence-column85876_acef19-2f > .kt-inside-inner-col,.kadence-column85876_acef19-2f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_acef19-2f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_acef19-2f > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_acef19-2f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_acef19-2f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_acef19-2f{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_acef19-2f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_acef19-2f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_acef19-2f\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id85876_01401f-06 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id85876_01401f-06 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id85876_01401f-06 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-lg, 4rem);row-gap:var(--global-kb-gap-lg, 4rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id85876_01401f-06 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id85876_01401f-06 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id85876_01401f-06 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id85876_01401f-06 alignnone sil__pair wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle\">\n<style>.kadence-column85876_4363df-49 > .kt-inside-inner-col,.kadence-column85876_4363df-49 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_4363df-49 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_4363df-49 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_4363df-49 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_4363df-49 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_4363df-49{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_4363df-49 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_4363df-49 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_4363df-49\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-image.kb-image85876_cf47e9-64:not(.kb-specificity-added):not(.kb-extra-specificity-added){margin-bottom:0px;}.kb-image85876_cf47e9-64 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image85876_cf47e9-64 size-full kb-image-is-ratio-size sil__image\" id=\"sil-img-1\"><div class=\"kb-is-ratio-image kb-image-ratio-land43\"><img loading=\"lazy\" decoding=\"async\" width=\"1707\" height=\"2560\" src=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-scaled.jpg\" alt=\"\" class=\"kb-img wp-image-80764\" srcset=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-scaled.jpg 1707w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-200x300.jpg 200w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-683x1024.jpg 683w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-768x1152.jpg 768w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-1024x1536.jpg 1024w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-1365x2048.jpg 1365w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image1-600x900.jpg 600w\" sizes=\"auto, (max-width: 1707px) 100vw, 1707px\" \/><\/div><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column85876_52e827-be > .kt-inside-inner-col,.kadence-column85876_52e827-be > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_52e827-be > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_52e827-be > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_52e827-be > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_52e827-be > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_52e827-be{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_52e827-be > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_52e827-be > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_52e827-be sil__content\" id=\"sil-content-1\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65, .wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65[data-kb-block=\"kb-adv-heading85876_7ec73f-65\"]{margin-bottom:0px;font-size:var(--global-kb-font-size-sm, 0.9rem);font-style:normal;text-transform:uppercase;letter-spacing:1px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65[data-kb-block=\"kb-adv-heading85876_7ec73f-65\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_7ec73f-65[data-kb-block=\"kb-adv-heading85876_7ec73f-65\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading85876_7ec73f-65 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_7ec73f-65\"><strong>About Us<\/strong><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c, .wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c[data-kb-block=\"kb-adv-heading85876_06b7d9-0c\"]{margin-top:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c[data-kb-block=\"kb-adv-heading85876_06b7d9-0c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_06b7d9-0c[data-kb-block=\"kb-adv-heading85876_06b7d9-0c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading85876_06b7d9-0c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_06b7d9-0c\">Your Title Here<\/h2>\n\n\n\n<p>Liquorice brownie caramels tootsie roll topping cake lemon drops donut liquorice. Biscuit macaroon jelly beans gummi bears sugar plum cheesecake gummies apple pie ice cream. Halvah shortbread halvah cake bonbon tart sweet roll biscuit souffl\u00e9.<br><\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id85876_9027c5-8c > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id85876_9027c5-8c > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id85876_9027c5-8c > .kt-row-column-wrap{column-gap:var(--global-kb-gap-lg, 4rem);row-gap:var(--global-kb-gap-lg, 4rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id85876_9027c5-8c > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id85876_9027c5-8c > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id85876_9027c5-8c > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id85876_9027c5-8c alignnone sil__pair wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle\">\n<style>.kadence-column85876_b89fe0-35 > .kt-inside-inner-col,.kadence-column85876_b89fe0-35 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_b89fe0-35 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_b89fe0-35 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_b89fe0-35 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_b89fe0-35 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_b89fe0-35{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_b89fe0-35 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_b89fe0-35 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_b89fe0-35\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-image.kb-image85876_25ce0f-62:not(.kb-specificity-added):not(.kb-extra-specificity-added){margin-bottom:0px;}.kb-image85876_25ce0f-62 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image85876_25ce0f-62 size-full kb-image-is-ratio-size sil__image\" id=\"sil-img-2\"><div class=\"kb-is-ratio-image kb-image-ratio-land43\"><img loading=\"lazy\" decoding=\"async\" width=\"1707\" height=\"2560\" src=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-scaled.jpg\" alt=\"\" class=\"kb-img wp-image-80767\" srcset=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-scaled.jpg 1707w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-200x300.jpg 200w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-683x1024.jpg 683w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-768x1152.jpg 768w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-1024x1536.jpg 1024w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-1365x2048.jpg 1365w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image4-600x900.jpg 600w\" sizes=\"auto, (max-width: 1707px) 100vw, 1707px\" \/><\/div><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column85876_353fb5-1e > .kt-inside-inner-col,.kadence-column85876_353fb5-1e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_353fb5-1e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_353fb5-1e > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_353fb5-1e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_353fb5-1e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_353fb5-1e{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_353fb5-1e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_353fb5-1e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_353fb5-1e sil__content\" id=\"sil-content-2\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba, .wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba[data-kb-block=\"kb-adv-heading85876_8d5414-ba\"]{margin-bottom:0px;font-size:var(--global-kb-font-size-sm, 0.9rem);font-style:normal;text-transform:uppercase;letter-spacing:1px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba[data-kb-block=\"kb-adv-heading85876_8d5414-ba\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_8d5414-ba[data-kb-block=\"kb-adv-heading85876_8d5414-ba\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading85876_8d5414-ba wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_8d5414-ba\"><strong>About Us<\/strong><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94, .wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94[data-kb-block=\"kb-adv-heading85876_efea85-94\"]{margin-top:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94[data-kb-block=\"kb-adv-heading85876_efea85-94\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_efea85-94[data-kb-block=\"kb-adv-heading85876_efea85-94\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading85876_efea85-94 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_efea85-94\">Your Second Title Here<\/h2>\n\n\n\n<p>Liquorice brownie caramels tootsie roll topping cake lemon drops donut liquorice. Biscuit macaroon jelly beans gummi bears sugar plum cheesecake gummies apple pie ice cream. Halvah shortbread halvah cake bonbon tart sweet roll biscuit souffl\u00e9.<br><\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id85876_e20987-e9 > .kt-row-column-wrap{align-content:center;}:where(.kb-row-layout-id85876_e20987-e9 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}.kb-row-layout-id85876_e20987-e9 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-lg, 4rem);row-gap:var(--global-kb-gap-lg, 4rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id85876_e20987-e9 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id85876_e20987-e9 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id85876_e20987-e9 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id85876_e20987-e9 alignnone sil__pair wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-middle\">\n<style>.kadence-column85876_214686-b5 > .kt-inside-inner-col,.kadence-column85876_214686-b5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_214686-b5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_214686-b5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_214686-b5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_214686-b5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_214686-b5{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_214686-b5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_214686-b5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_214686-b5\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-image.kb-image85876_a3d91a-bd:not(.kb-specificity-added):not(.kb-extra-specificity-added){margin-bottom:0px;}.kb-image85876_a3d91a-bd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image85876_a3d91a-bd size-full kb-image-is-ratio-size sil__image\" id=\"sil-img-3\"><div class=\"kb-is-ratio-image kb-image-ratio-land43\"><img loading=\"lazy\" decoding=\"async\" width=\"1707\" height=\"2560\" src=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-scaled.jpg\" alt=\"\" class=\"kb-img wp-image-80769\" srcset=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-scaled.jpg 1707w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-200x300.jpg 200w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-683x1024.jpg 683w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-768x1152.jpg 768w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-1024x1536.jpg 1024w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-1365x2048.jpg 1365w, https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/r316-demo-image6-600x900.jpg 600w\" sizes=\"auto, (max-width: 1707px) 100vw, 1707px\" \/><\/div><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column85876_3e4349-82 > .kt-inside-inner-col,.kadence-column85876_3e4349-82 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85876_3e4349-82 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85876_3e4349-82 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85876_3e4349-82 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85876_3e4349-82 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85876_3e4349-82{position:relative;}@media all and (max-width: 1024px){.kadence-column85876_3e4349-82 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85876_3e4349-82 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85876_3e4349-82 sil__content\" id=\"sil-content-3\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84[data-kb-block=\"kb-adv-heading85876_5a5901-84\"]{margin-bottom:0px;font-size:var(--global-kb-font-size-sm, 0.9rem);font-style:normal;text-transform:uppercase;letter-spacing:1px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84[data-kb-block=\"kb-adv-heading85876_5a5901-84\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a5901-84[data-kb-block=\"kb-adv-heading85876_5a5901-84\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading85876_5a5901-84 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_5a5901-84\"><strong>About Us<\/strong><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5[data-kb-block=\"kb-adv-heading85876_5a6de2-e5\"]{margin-top:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5[data-kb-block=\"kb-adv-heading85876_5a6de2-e5\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading85876_5a6de2-e5[data-kb-block=\"kb-adv-heading85876_5a6de2-e5\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading85876_5a6de2-e5 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading85876_5a6de2-e5\">Your Third Title Here<\/h2>\n\n\n\n<p>Liquorice brownie caramels tootsie roll topping cake lemon drops donut liquorice. Biscuit macaroon jelly beans gummi bears sugar plum cheesecake gummies apple pie ice cream. Halvah shortbread halvah cake bonbon tart sweet roll biscuit souffl\u00e9.<br><\/p>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>The Above Javascript is needed in order for this block to work properly. You will follow these instruction and once done you can delete this yellow box and the Custom HTML block above. This block is also NOT meant to be positioned higher on the page as the viewport height is an important part of&#8230;<\/p>\n","protected":false},"author":1,"featured_media":85949,"menu_order":0,"template":"","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"<script>\n(function () {\n  function getOffsetTopFromDoc(el) {\n    const r = el.getBoundingClientRect();\n    return r.top + window.scrollY;\n  }\n\n  function initSIL(wrap) {\n    const pairs = [...wrap.querySelectorAll(\".sil__pair\")];\n    const images = pairs.map(p => p.querySelector(\".sil__image\")).filter(Boolean);\n    const contents = pairs.map(p => p.querySelector(\".sil__content\")).filter(Boolean);\n\n    if (!images.length || !contents.length) return;\n\n    document.documentElement.classList.add(\"js\");\n    wrap.dataset.currentIndex = wrap.dataset.currentIndex || \"1\";\n\n    \/\/ Create (or reuse) the pinned stage\n    let stage = wrap.querySelector(\".sil__stage\");\n    if (!stage) {\n      stage = document.createElement(\"div\");\n      stage.className = \"sil__stage\";\n      wrap.appendChild(stage);\n    }\n\n    \/\/ Clone content panels into the stage\n    stage.innerHTML = \"\";\n    contents.forEach((c) => stage.appendChild(c.cloneNode(true)));\n\n    \/\/ ----------------------------\n    \/\/ SMOOTHING + MEASURE CACHE\n    \/\/ ----------------------------\n    let measured = {\n      left: 0,\n      width: 0,\n      contentHeight: 0,\n      topImgMid: 0,\n      botImgMid: 0\n    };\n\n    \/\/ Hysteresis to prevent flip-flop\n    let activeIndex = parseInt(wrap.dataset.currentIndex || \"1\", 10);\n    let activeDistance = Number.MAX_VALUE;\n\n    \/\/ rAF scheduling so we don't do layout thrash mid-scroll\n    let rafScroll = null;\n    let rafY = null;\n\n    function isMobile() {\n      return window.matchMedia(\"(max-width: 767.98px)\").matches;\n    }\n\n    function viewportMidY() {\n      return window.scrollY + window.innerHeight \/ 2;\n    }\n\n    function distanceFromViewportMiddle(el) {\n      const elMidY = getOffsetTopFromDoc(el) + el.clientHeight \/ 2;\n      return Math.abs(viewportMidY() - elMidY);\n    }\n\n    function measure() {\n      if (isMobile()) return;\n\n      \/\/ Align stage to RIGHT column of first content\n      const firstContent = contents[0];\n      const bcr = firstContent.getBoundingClientRect();\n\n      \/\/ Cache x\/width (round to prevent subpixel jitter)\n      measured.left = Math.round(bcr.left);\n      measured.width = Math.round(bcr.width);\n\n      \/\/ Cache stage height (also rounded)\n      measured.contentHeight = Math.round(stage.getBoundingClientRect().height);\n\n      \/\/ Cache image midpoint boundaries (doc coords)\n      const firstImgBcr = images[0].getBoundingClientRect();\n      measured.topImgMid = firstImgBcr.top + window.scrollY + firstImgBcr.height \/ 2;\n\n      const lastImgBcr = images[images.length - 1].getBoundingClientRect();\n      measured.botImgMid = lastImgBcr.top + window.scrollY + lastImgBcr.height \/ 2;\n\n      \/\/ Set X + width once per measure (not on every scroll)\n      wrap.style.setProperty(\"--sil-content-offset-x\", measured.left + \"px\");\n      wrap.style.setProperty(\"--sil-content-width\", measured.width + \"px\");\n    }\n\n    function updateY() {\n      if (isMobile()) {\n        wrap.style.removeProperty(\"--sil-content-position\");\n        wrap.style.removeProperty(\"--sil-content-offset-x\");\n        wrap.style.removeProperty(\"--sil-content-offset-y\");\n        wrap.style.removeProperty(\"--sil-content-width\");\n        return;\n      }\n\n      \/\/ Always fixed on desktop like your original\n      wrap.style.setProperty(\"--sil-content-position\", \"fixed\");\n\n      const mid = viewportMidY();\n\n      \/\/ Clamp the pinned box between first\/last image midpoints\n      let y;\n      if (mid < measured.topImgMid) {\n        y = (measured.topImgMid - window.scrollY) - measured.contentHeight \/ 2;\n      } else if (mid > measured.botImgMid) {\n        y = (measured.botImgMid - window.scrollY) - measured.contentHeight \/ 2;\n      } else {\n        y = window.innerHeight \/ 2 - measured.contentHeight \/ 2;\n      }\n\n      \/\/ Round Y to prevent shimmer\n      wrap.style.setProperty(\"--sil-content-offset-y\", Math.round(y) + \"px\");\n    }\n\n    function handleScroll() {\n      \/\/ Your \"always start at 1 near top\" guard\n      const sectionTop = wrap.getBoundingClientRect().top;\n      if (sectionTop > -50) {\n        wrap.dataset.currentIndex = \"1\";\n        activeIndex = 1;\n        activeDistance = Number.MAX_VALUE;\n        return;\n      }\n\n      \/\/ Find closest image to viewport middle\n      let closestIndex = 1;\n      let closestDistance = Number.MAX_VALUE;\n\n      images.forEach((el, idx) => {\n        const d = distanceFromViewportMiddle(el);\n        if (d < closestDistance) {\n          closestDistance = d;\n          closestIndex = idx + 1;\n        }\n      });\n\n      \/\/ Hysteresis: only switch if \"meaningfully closer\"\n      if (closestIndex !== activeIndex) {\n        const improvement = activeDistance - closestDistance;\n        if (improvement > 35) { \/\/ tweak 20\u201360\n          activeIndex = closestIndex;\n          activeDistance = closestDistance;\n        }\n      } else {\n        activeDistance = closestDistance;\n      }\n\n      wrap.dataset.currentIndex = String(activeIndex);\n    }\n\n    function onScroll() {\n      if (rafScroll) return;\n      rafScroll = requestAnimationFrame(() => {\n        rafScroll = null;\n        handleScroll();\n      });\n\n      if (rafY) return;\n      rafY = requestAnimationFrame(() => {\n        rafY = null;\n        updateY();\n      });\n    }\n\n    function onResize() {\n      \/\/ Re-measure + re-position\n      if (isMobile()) return;\n      measure();\n      updateY();\n      handleScroll();\n    }\n\n    \/\/ Initial run (order matters)\n    if (!isMobile()) {\n      measure();\n      updateY();\n    }\n    handleScroll();\n\n    \/\/ Listeners\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onResize);\n\n    \/\/ Optional: click image scroll-to-center\n    images.forEach((img) => {\n      img.style.cursor = \"pointer\";\n      img.addEventListener(\"click\", () => {\n        const midOffset = (window.innerHeight - img.clientHeight) \/ 2;\n        window.scrollTo({\n          top: getOffsetTopFromDoc(img) - midOffset,\n          behavior: \"smooth\",\n        });\n      });\n    });\n\n    \/\/ Re-measure once images finish loading (prevents early jump)\n    setTimeout(onResize, 150);\n    setTimeout(onResize, 400);\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    document.querySelectorAll(\".sil\").forEach(initSIL);\n  });\n})();\n<\/script>\n","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"kadence-cloud-collections":[105],"kadence-cloud-categories":[106,102],"kadence-cloud-keywords":[],"class_list":["post-85876","kadence_cloud","type-kadence_cloud","status-publish","has-post-thumbnail","hentry","kadence-cloud-collections-website-builders","kadence-cloud-categories-website-builders","kadence-cloud-categories-hero-sections"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sticky scrolling - Creator Cloud<\/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:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky scrolling - Creator Cloud\" \/>\n<meta property=\"og:description\" content=\"The Above Javascript is needed in order for this block to work properly. You will follow these instruction and once done you can delete this yellow box and the Custom HTML block above. This block is also NOT meant to be positioned higher on the page as the viewport height is an important part of...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/\" \/>\n<meta property=\"og:site_name\" content=\"Creator Cloud\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T16:25:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1442\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/\",\"url\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/\",\"name\":\"Sticky scrolling - Creator Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg\",\"datePublished\":\"2026-03-02T17:42:15+00:00\",\"dateModified\":\"2026-04-01T16:25:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage\",\"url\":\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg\",\"contentUrl\":\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg\",\"width\":2560,\"height\":1442},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demos.restored316.com\/creator-cloud\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky scrolling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#website\",\"url\":\"https:\/\/demos.restored316.com\/creator-cloud\/\",\"name\":\"Creator Cloud\",\"description\":\"The Block Collection That Will Help You Design Blog Posts That Convert\",\"publisher\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demos.restored316.com\/creator-cloud\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#organization\",\"name\":\"Creator Cloud\",\"url\":\"https:\/\/demos.restored316.com\/creator-cloud\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png\",\"contentUrl\":\"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png\",\"width\":1158,\"height\":182,\"caption\":\"Creator Cloud\"},\"image\":{\"@id\":\"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky scrolling - Creator Cloud","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:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/","og_locale":"en_US","og_type":"article","og_title":"Sticky scrolling - Creator Cloud","og_description":"The Above Javascript is needed in order for this block to work properly. You will follow these instruction and once done you can delete this yellow box and the Custom HTML block above. This block is also NOT meant to be positioned higher on the page as the viewport height is an important part of...","og_url":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/","og_site_name":"Creator Cloud","article_modified_time":"2026-04-01T16:25:18+00:00","og_image":[{"width":2560,"height":1442,"url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/","url":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/","name":"Sticky scrolling - Creator Cloud","isPartOf":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage"},"image":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage"},"thumbnailUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg","datePublished":"2026-03-02T17:42:15+00:00","dateModified":"2026-04-01T16:25:18+00:00","breadcrumb":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#primaryimage","url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg","contentUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-scaled.jpg","width":2560,"height":1442},{"@type":"BreadcrumbList","@id":"https:\/\/demos.restored316.com\/creator-cloud\/cloud\/sticky-scrolling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demos.restored316.com\/creator-cloud\/"},{"@type":"ListItem","position":2,"name":"Sticky scrolling"}]},{"@type":"WebSite","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#website","url":"https:\/\/demos.restored316.com\/creator-cloud\/","name":"Creator Cloud","description":"The Block Collection That Will Help You Design Blog Posts That Convert","publisher":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demos.restored316.com\/creator-cloud\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#organization","name":"Creator Cloud","url":"https:\/\/demos.restored316.com\/creator-cloud\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/","url":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png","contentUrl":"https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2025\/01\/CC-Logo-Horizontal-1.png","width":1158,"height":182,"caption":"Creator Cloud"},"image":{"@id":"https:\/\/demos.restored316.com\/creator-cloud\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":{"kadence-cloud-collections":[{"value":105,"label":"Website Builders"}],"kadence-cloud-categories":[{"value":106,"label":"WEBSITE BUILDERS"},{"value":102,"label":"- Hero Sections"}]},"featured_image_src_large":["https:\/\/demos.restored316.com\/creator-cloud\/wp-content\/uploads\/sites\/64\/2026\/03\/demos.restored316.com_creator-cloud__post_typekadence_cloudp85876previewtrue-1024x577.jpg",1024,577,true],"author_info":{"display_name":"Lauren","author_link":"https:\/\/demos.restored316.com\/creator-cloud\/author\/r316demos\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/85876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library"}],"about":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/types\/kadence_cloud"}],"author":[{"embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":10,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/85876\/revisions"}],"predecessor-version":[{"id":85907,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/cloud_library\/85876\/revisions\/85907"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/media\/85949"}],"wp:attachment":[{"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/media?parent=85876"}],"wp:term":[{"taxonomy":"kadence-cloud-collections","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-collections?post=85876"},{"taxonomy":"kadence-cloud-categories","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-categories?post=85876"},{"taxonomy":"kadence-cloud-keywords","embeddable":true,"href":"https:\/\/demos.restored316.com\/creator-cloud\/wp-json\/wp\/v2\/kadence-cloud-keywords?post=85876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}