donwiss Posted June 19, 2019 Share Posted June 19, 2019 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. Link to comment Share on other sites More sharing options...
donwiss Posted June 20, 2019 Author Share Posted June 20, 2019 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 More sharing options...
donwiss Posted January 26, 2020 Author Share Posted January 26, 2020 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 More sharing options...
niche Posted January 27, 2020 Share Posted January 27, 2020 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now