5 ms·

I thought I knew CSS pretty well, but position: sticky is a new one for me.

raspyberr 5y ago
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.
Tade0 5y ago
It's fairly new in general and not widely supported yet: https://caniuse.com/css-sticky https://caniuse.com/css-sticky
- jorams 5y ago
  Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.
  - Tade0 5y ago
    Exactly. Full support won't be there until all the marked issues are fixed.
- majewsky 5y ago
  > 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.
  - Tade0 5y ago
    To me 2015 is new. I wrote my first lines of JS in 2001.
- joshspankit 5y ago
  Works on my iOS13 iPad, where there are 4-5 on that page that don’t.
ihaveajob 5y ago
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.
Yeroc 5y ago
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.
- nightpool 5y ago
  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-padding https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... and https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/ https://css-tricks.com/fixed-headers-on-page-links-and-overl...
- NightMKoder 5y ago
  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-padding-top 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.
elwell 5y ago
Follow-up reading material... IntersectionObserver: https://developers.google.com/web/updates/2017/09/sticky-headers https://developers.google.com/web/updates/2017/09/sticky-hea...
hypertele-Xii 5y ago
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); }
- oneplusone 5y ago
  Or just use the css property scroll-margin.
  - city41 5y ago
    Unfortunately not supported by Safari.
  - hypertele-Xii 5y ago
    This only works with explicitly set heights. If you don't know the header's height, this won't work.
- lifthrasiir 5y ago
  You don't even need JS to fix the target scroll: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/21707103 https://stackoverflow.com/questions/10732690/offsetting-an-h...
  - Zardoz84 5y ago
    Yeah, but have a little problem. What happen when the anchored item have visible text ?
  - hypertele-Xii 5y ago
    That only works when you set the height explicitly.

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.

Tade0 5y ago

It's fairly new in general and not widely supported yet: https://caniuse.com/css-sticky https://caniuse.com/css-sticky

jorams 5y ago
Your link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.
- Tade0 5y ago
  Exactly. Full support won't be there until all the marked issues are fixed.
majewsky 5y ago
> 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.
- Tade0 5y ago
  To me 2015 is new. I wrote my first lines of JS in 2001.
joshspankit 5y ago
Works on my iOS13 iPad, where there are 4-5 on that page that don’t.

ihaveajob 5y ago

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.

Yeroc 5y ago

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.

nightpool 5y ago
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-padding https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padd... and https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/ https://css-tricks.com/fixed-headers-on-page-links-and-overl...
NightMKoder 5y ago
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-padding-top 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.

elwell 5y ago

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

hypertele-Xii 5y ago

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); }

oneplusone 5y ago
Or just use the css property scroll-margin.
- city41 5y ago
  Unfortunately not supported by Safari.
- hypertele-Xii 5y ago
  This only works with explicitly set heights. If you don't know the header's height, this won't work.
lifthrasiir 5y ago
You don't even need JS to fix the target scroll: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header/21707103 https://stackoverflow.com/questions/10732690/offsetting-an-h...
- Zardoz84 5y ago
  Yeah, but have a little problem. What happen when the anchored item have visible text ?
- hypertele-Xii 5y ago
  That only works when you set the height explicitly.