Jump to content
donwiss

Code for a delayed sticky header/footer wanted

Recommended Posts

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.

scroll-to-top-icon-32.png

scroll-to-top-icon-42.png

scroll-up-icon-32.png

scroll-up-icon-42.png

Share this post


Link to post
Share on other sites

I posted the icons, so that anyone that wants them can save and use them. The first two are what would be used in a footer. The last two are for a header. The corners are transparent. I see on the Samsung that inside the circle the background shows through with a middling opacity. Something I wasn't looking for, as I don't expect it possible in a browser. Not sure I even like it.

There are two sizes, with them being switched for mobile using:

.icon2 {display:none;}
@media (max-width:600px) {  .icon1 {display:none;}  .icon2 {display:inline;}  }

<body>

<img src="scroll-up-icon-42.png" class="icon1" alt="scroll to top icon">
<img src="scroll-up-icon-32.png" class="icon2" alt="scroll to top icon">

Share this post


Link to post
Share on other sites

This still has not been answered. I now only want it at the bottom, as at the top it would be on top of where one lands when jumping to an anchor on the page. I have found a better example of what I want:

https://nyc.pollsitelocator.com/

You will need to enter an address. Use (Gracie Mansion):

House #: ‎88

Street Name: East End Avenue

Zip Code: 10028

After you scroll down past some container, an orange arrow appears at the bottom. Click and you return to the top. Arrow disappears. Perfect.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...