Question:
I imported a SVG graphic I want to stick on scroll, FYI it does have a bit of hide/show logic on it as well. See Leveraging a boolean to trigger a show/hide on a UI element for more details.
Product:
Wix Editor (Not Studio)
What are you trying to achieve:
Get my #group2 ID UI element to stick on scroll while it’s there.
What have you already tried:
Three things.
One
//this should stick the element ID that is nested in the imported function (makeElementSticky) e.g. #group2 for (application recieved)
export function makeElementSticky(elementId) {
const element = document.getElementById(elementId);
if (element) {
window.addEventListener(‘scroll’, () => {
if (window.scrollY > element.offsetTop) {
element.style.position = ‘fixed’;
element.style.top = ‘0’;
} else {
element.style.position = ‘static’;
}
});
}
}
Two
/* this should facilitate sticking #group2 (application received) */
#group2 {
position: sticky;
top: 0;
z-index: 1000; /* Adjust as needed */
}
Three
import { makeElementSticky } from ‘backend/CheckIfShownStickAppRecieved.js’; // Import the function
Four
//should import the javascript function that is wrapping the javascript logic for sticking #group2
// UI element ID (the application recieved message)
$w.onReady(function () {
makeElementSticky(‘group2’); // Call the function with the element ID
});
Additional information:
I do have onReady being used elsewhere and there is indeed other code in the page code but nothing with the same names functions wise or using the same UI element except the linked hide/show logic above in the initial question.