Jump to content

Code for a delayed sticky header/footer wanted


donwiss

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

Link to comment
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">

Link to comment
Share on other sites

  • 7 months later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...