How to make a sticky navbar change color when it has reached the top? Like in solidjs homepage

I think I should use this https://github.com/solidjs-community/solid-primitives/tree/main/packages/intersection-observer#readme , but I can't think of a way of implementing that. Code:
const Navbar = () => {
const [getNav, setNav] = createSignal(true);
const navHandler = () => {
setNav(!getNav());
};

const [getBgColor, setBgColor] = createSignal(false);

return (
<nav
class={
"sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
(getBgColor()
? "bg-primary-light transition duration-500 ease-linear"
: "")
}
id="navbar"
>
<img
src="/public/logo.png"
alt="logo"
class="2xl:h-18 h-12 lg:h-14 xl:h-16"
/>
<ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
<a href="/" class="xl:mx-3 2xl:mx-4">
Inicio
</a>
<a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
Quienes somos?
</a>
<a href="escuela/" class="xl:mx-3 2xl:mx-4">
Escuela
</a>
<a href="eventos/" class="xl:mx-3 2xl:mx-4">
Eventos
</a>
<a href="blog/" class="xl:mx-3 2xl:mx-4">
Blog
</a>
<button class="block">Unirme</button>
</ul>
<div onClick={navHandler} class="block sm:hidden">
{!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
</div>
<div
class={
!getNav()
? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
: "fixed left-[-100%] h-screen"
}
>
<ul class="h-screen pt-12 font-display text-primary-light">
<li class="p-4">Inicio</li>
<li class="p-4">Quienes somos?</li>
<li class="p-4">Eventos</li>
<li class="p-4">Blog</li>
<button class="block p-4">Unirme</button>
</ul>
</div>
</nav>
);
};
const Navbar = () => {
const [getNav, setNav] = createSignal(true);
const navHandler = () => {
setNav(!getNav());
};

const [getBgColor, setBgColor] = createSignal(false);

return (
<nav
class={
"sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
(getBgColor()
? "bg-primary-light transition duration-500 ease-linear"
: "")
}
id="navbar"
>
<img
src="/public/logo.png"
alt="logo"
class="2xl:h-18 h-12 lg:h-14 xl:h-16"
/>
<ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
<a href="/" class="xl:mx-3 2xl:mx-4">
Inicio
</a>
<a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
Quienes somos?
</a>
<a href="escuela/" class="xl:mx-3 2xl:mx-4">
Escuela
</a>
<a href="eventos/" class="xl:mx-3 2xl:mx-4">
Eventos
</a>
<a href="blog/" class="xl:mx-3 2xl:mx-4">
Blog
</a>
<button class="block">Unirme</button>
</ul>
<div onClick={navHandler} class="block sm:hidden">
{!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
</div>
<div
class={
!getNav()
? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
: "fixed left-[-100%] h-screen"
}
>
<ul class="h-screen pt-12 font-display text-primary-light">
<li class="p-4">Inicio</li>
<li class="p-4">Quienes somos?</li>
<li class="p-4">Eventos</li>
<li class="p-4">Blog</li>
<button class="block p-4">Unirme</button>
</ul>
</div>
</nav>
);
};
GitHub
solid-primitives/packages/intersection-observer at main · solidjs-c...
A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/intersection-observer at main · solidjs-community/solid-primitives
4 Replies
high1
high114mo ago
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
high1
high114mo ago
Found an article which uses the Interesection Observer https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ Would this help? He uses top:-1px to trigger the observer here.
Chris Coyier
CSS-Tricks
How to Detect When a Sticky Element Gets Pinned | CSS-Tricks
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
mdynnl
mdynnl14mo ago
solid site uses an empty div instead which i think is cooler trick https://playground.solidjs.com/anonymous/2a095e8f-313c-4c8c-ac64-07f192936646
.suhaylmv
.suhaylmv14mo ago
It works! Thank you so much I opted for another easier way but thank you anyway!