How to make the navbar change color when it's sticky like in the Solidjs homepage?

[fallow bane]

I only could come up with this. 400 is a fixed value for now, I should probably change it. Any suggestions?

  const changeBgColorHandler = () => {
    if (window.scrollY >= 400) {
      setBgColor(true);
    } else {
      setBgColor(false);
    }
  };

  window.addEventListener("scroll", changeBgColorHandler);

[pliant jolt]

Here's a quick snippet from a similar feature I made where I change the opacity based on percentage scrolled of the screen.

• passive event listener option, because you don't want to create bad scroll performance https://developer.chrome.com/en/docs/lighthouse/best-practices/uses-passive-event-listeners/
• requestAnimation frame run the calculation right before next frame is painted with latest dimensions etc https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• a little flag to prevent the eventhandler from calling multiple times

  const [percentageScrolled, setPercentageScrolled] = createSignal(0); 
   let handlingScroll = false; 
   onMount(() => { 
     document.addEventListener( 
       "scroll", 
       () => { 
         if (!handlingScroll) { 
           handlingScroll = true; 
           window.requestAnimationFrame(() => { 
             const p = Math.min(Math.round((window.scrollY / window.innerHeight) * 100) / 100, 1); 
             setPercentageScrolled(p); 
             handlingScroll = false; 
           }); 
         } 
       }, 
       { passive: true } 
     ); 
   });

You may also be interested in the Solid Primitive useWindowScrollPosition which abstracts some of these performs considerations away. Especially useful if you plan doing more with scroll positions in other components because it creates a single listener to be used in other places.

https://github.com/solidjs-community/solid-primitives/tree/main/packages/scroll#useWindowScrollPosition

Here's the soure of solidjs website, they are using an intersection observer, which is not a weird idea as it only triggers when the intersecting element overlaps https://github.com/solidjs/solid-site/blob/main/src/components/Nav/index.tsx

[fallow bane]

Your snippet is interesting. I'm thinking about getting the vertical position of the Navbar and substitute it instead of the fixed value I've put earlier (400). This seems to be an easier solution, but I don't know how to do it