Hi OutSystems Community,
I'm working in OutSystems Developer Cloud (ODC) and need to implement a scroll-based header color change, but with a specific requirement
Current Situation:
Header: Transparent background with white text
Multiple content sections with different backgrounds
I only want to change the header text color when it overlaps with specific widgets/sections (not all white areas)
Current State: Header is transparent with white text
Desired Behavior: When scrolling to white background content → change text to black
Need: Scroll event detection in ODC
Challenge:
I need to detect when the header scrolls over specific widgets only (not all white-background content).
Hello @Wei Sheng Pang
You can achieve this using JavaScript with IntersectionObserver. It detects when the header overlaps specific sections and changes the text color accordingly (no scroll event needed).
I’ve shared a simple HTML example below to demonstrate how it works. You can adapt the same JS logic in ODC using RunJavaScript.
hi @Wei Sheng PangIn OutSystems ODC, there’s no native scroll event you can hook into directly, so the standard approach is to use JavaScript. Attach a JS block to the screen and listen to the window or container scroll event, then toggle a CSS class on the header when a threshold is crossed (for example, when the header overlaps a darker section). For more accurate behavior based on background changes, use the IntersectionObserver API to detect when specific sections enter the viewport and update the header text color accordingly. This avoids expensive continuous scroll handling and performs better on mobile and web. The header styling itself should be controlled purely via CSS classes updated from JavaScript. thankyou ,
Thank you both, @Jayaprakash Ramesh and @Gourav Shrivastava , for your helpful and detailed suggestions. I appreciate you taking the time to explain the approach using JavaScript and the IntersectionObserver API, as well as providing the practical example. This gives me a clear path forward for implementing the header behavior in ODC.