I agree with a lot of the complaints on this article except I think like two, and this is one of them. I think a sticky header is incredibly useful, and they're not something new. Books have sticky headers! Every page of a book will generally list the title and author on the top of each page. I find it just a useful way to provide context and to help me remember who/what I'm reading. The colours/branding of the sticky header communicate that much better to me than the tiny text-only title/url of my browser. And the favicon like-wise doesn't contain enough details for me to latch onto it.
But for UX: (1) Keep it small and simple! It shouldn't be more than ~2 lines of text. (2) Make it CSS-only; if you have to use custom JS to achieve a certain effect, be ready to spend a LOT of time to get the details right, or it'll feel janky. (3) Use `scroll-padding` in the CSS to make sure links to sections/etc work correctly.
> (2) Make it CSS-only; if you have to use custom JS to achieve a certain effect, be ready to spend a LOT of time to get the details right, or it'll feel janky.
I have built a handful of personal sites at this point with no JS, and it's really amazing what modern CSS can do. My favorite trick is using tabindex=0 and :focus-within to make dropdowns (using :focus doesn't handle submenus).
But for UX: (1) Keep it small and simple! It shouldn't be more than ~2 lines of text. (2) Make it CSS-only; if you have to use custom JS to achieve a certain effect, be ready to spend a LOT of time to get the details right, or it'll feel janky. (3) Use `scroll-padding` in the CSS to make sure links to sections/etc work correctly.