Hacker News Reader

Comment by bradstewart | Hacker News Reader

I thought I knew CSS pretty well, but

  position: sticky

is a new one for me.

View on HN

Sticky headers suffer from one glaring issue: If the page loads to an #anchor position, the sticky header covers up the anchor. Fix:

  window.onload = function()
  {
   var titlebarfixcoverfunction = function()
   {
    if (location.hash.indexOf('#') > -1)
    {
     var titlebar = document.getElementById('title');
     window.scrollBy(0, -titlebar.offsetHeight);
    }
   };
   titlebarfixcoverfunction();
   window.addEventListener('hashchange', titlebarfixcoverfunction);
  }

Or just use the css property scroll-margin.

Unfortunately not supported by Safari.

This only works with explicitly set heights. If you don't know the header's height, this won't work.

You don't even need JS to fix the target scroll: https://stackoverflow.com/questions/10732690/offsetting-an-h...

Yeah, but have a little problem. What happen when the anchored item have visible text ?

That only works when you set the height explicitly.

Follow-up reading material... IntersectionObserver: https://developers.google.com/web/updates/2017/09/sticky-hea...

I've used it for a few things and once you go beyond the basic examples, it's the wild west. But if you manage to make it work, some things like pricing tables where a section is sticky to the top until the next one pushes it upward, it's really neat.

Here's a really useful thing to bookmark:

javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()

Click the bookmark and sticky things disappear. Some websites are horrific with how much screen space they take up with sticyky banners. That also of course breaks some sites.

Interesting. Now does any browser actually support pgup/pgdown properly? Every time I run across a website that does this it annoys me that paging down doesn't properly account for the height of the stickied header making pgup/pgdown unusable.

The browser can't determine this statically (imagine trying to distinguish between a sticky header that takes up the entire width of the viewport, and a sticky sidebar that doesn't intersect the content at all), but page authors can use the scroll-padding variable to fix this! See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... and https://css-tricks.com/fixed-headers-on-page-links-and-overl...

I was researching something similar recently (sticky elements covering anchor scrolling) and there’s a somwhat modern solution to that: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... . As usual with new tech though, doesn’t work in Safari (and hence all of iOS) for now. I wonder if the same property could be used to make pgup/pgdown/space work correctly.

It's fairly new in general and not widely supported yet:

https://caniuse.com/css-sticky

Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.

Exactly. Full support won't be there until all the marked issues are fixed.

> It's fairly new in general

I used `position:sticky` in a productive website back in 2015, when it was already well-supported in Firefox. What's true is that Chrome only got support for it recently, and since Chrome == the internet nowadays, you will be forgiven for considering it new.

To me 2015 is new. I wrote my first lines of JS in 2001.

Works on my iOS13 iPad, where there are 4-5 on that page that don’t.

Reply on news.ycombinator.com