Hacker News Reader

Hacker News

Comment by err4nt | Hacker News Reader

Full thread

err4nt

Well this blog post is _really_ shortsighted for a couple reasons:

1. There's position: sticky; recently added to CSS: https://drafts.csswg.org/css-position/#sticky-pos

2. Position: sticky; is gaining browser support fast: http://caniuse.com/#feat=css-sticky

So what I draw from that are the following insights:

3. The author of the bookmarklet should update the code to also check for elements now using position: sticky;

4. Sticky elements haven't peaked on the web, the deluge is _about_ to begin actually. Brace yourselves…

View on HN

This article was written in 2013, almost 3 years before any browser supported "position: sticky". I disagree that the blog is shortsighted, but as you mentioned, the bookmarklet should be updated.

Does this little update to the bookmarklet solve the issue? I'm not a webdev, feel free to fix it.

(function () { var i, elements = document.querySelectorAll('body *');

  for (i = 0; i < elements.length; i++) {
    if (getComputedStyle(elements[i]).position === 'fixed') {
      elements[i].parentNode.removeChild(elements[i]);
    }
    // 2017 update:
    if (getComputedStyle(elements[i]).position === 'sticky') {
      elements[i].parentNode.removeChild(elements[i]);
    }
  }

})();

Almost. This modification would cover it:

    ...
    for (i = 0; i < elements.length; i++) {
       if (getComputedStyle(elements[i]).position === 'fixed' ||
           getComputedStyle(elements[i]).position === 'sticky') {
         elements[i].parentNode.removeChild(elements[i]);
       }
    } ...

There are probably more clever ways to go, but this will do the trick. BTW haven't found many sites using "sticky", but good to be ready just in case.

(3) That doesn't make the blog post "shortsighted", just missing a new trick, that's not much used yet anyway.

(4) The websites that wanted to have a sticky header would have done it already with one of the several available current methods. The appearance of an easier way to do it with a single CSS rule is not gonna increase their number drastically.

The blog post was written in 2013.

Reply on news.ycombinator.com