I would like a sticky header that does not appear until the page has scrolled past a specified container.
I tried following the code at On Scroll Header, but I can't get the header to start not visible. Nor was I able to get it to find where the container bottom is.
I think https://nytimes.com/ is doing what I want. After the menu bar that is embedded in the page is passed, a different menu bar appears.
What I will do with this is to have an upward pointing arrow on a transparent sticky header, that when clicked takes one back to the top of the page. Obviously this is not needed until one has passed the heading.
An alternative is a sticky footer with an up-to-top arrow. On Samsung phones the arrow appears at the bottom of the screen while scrolling (e.g. in their Notes and browser), then disappears two second after scrolling stops.
I think the answer to this would make a good How TO page.