SolidJS•2y ago

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•2y 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•2y 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•2y ago

solid site uses an empty div instead which i think is cooler trick https://playground.solidjs.com/anonymous/2a095e8f-313c-4c8c-ac64-07f192936646

suhaylmvOP•2y ago

It works! Thank you so much I opted for another easier way but thank you anyway!

Gaming

Programming

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