Created
June 28, 2023 10:44
-
-
Save thisbit/32a70f8b3d41e781bdf804a2b747478b to your computer and use it in GitHub Desktop.
Open generateblocks accordions when item becomes sticky
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.gb-accordion .gb-button { | |
position: sticky; | |
top: 100px; | |
z-index: 5; | |
background-color: var(--base); | |
} | |
.admin-bar .gb-accordion .gb-button { | |
top: 132px; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener("DOMContentLoaded", function () { | |
var header = document.querySelector(".thisbit-custom-header"); | |
var elements = document.querySelectorAll(".gb-accordion__item"); | |
var activeElement = null; | |
function handleScroll() { | |
var scrollPosition = window.scrollY; | |
var headerPosition = header.offsetHeight + 2; // Add 2 pixels to header height | |
for (var i = elements.length - 1; i >= 0; i--) { | |
var element = elements[i]; | |
var elementPosition = element.offsetTop; | |
if (scrollPosition >= elementPosition - headerPosition) { | |
if (activeElement !== element) { | |
if (activeElement) { | |
activeElement.classList.remove("gb-accordion__item-open"); | |
} | |
activeElement = element; | |
activeElement.classList.add("gb-accordion__item-open"); | |
} | |
break; | |
} | |
} | |
} | |
window.addEventListener("scroll", handleScroll); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment