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

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

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

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

  window.addEventListener("scroll", changeBgColorHandler);

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

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

  window.addEventListener("scroll", changeBgColorHandler);

2 Replies

Unknown User•2y ago

Message Not Public

suhaylmvOP•2y ago

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 Unfortunately I don't know typescript yet 😦

Gaming

Programming

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