Jump to content

donwiss

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by donwiss

    Code for a delayed sticky header/footer wanted

    in JavaScript

    Posted

    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.

    Code for a delayed sticky header/footer wanted

    in JavaScript

    Posted

    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">

    Code for a delayed sticky header/footer wanted

    in JavaScript

    Posted

    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

×
×
  • Create New...