As with most such bars, it breaks scrolling one screen at a time using Space or Page Down. So I get to read:
"Now, I’m not saying that small typography is bad. An 18px font is perfectly legible"
[press Space]
"captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text."
Fixing this is entirely doable - nytimes.com has a fixed navbar but Space still scrolls <1 screen at a time. I would expect better from a screed like this which proclaims "Scrolling is a natural, established pattern on the web - people expect to have to scroll."
javascript: (function%20()%20{var%20i,elements=document.querySelectorAll('body%20*');%20for%20(i=0;i<elements.length;i++)%20{if%20(getComputedStyle(elements[i]).position==='fixed'%20||%20getComputedStyle(elements[i]).position==='sticky')%20{elements[i].parentNode.removeChild(elements[i]);}}})();
Anything on the page styled as position: fixed or position: sticky is deleted. Cleans those things right up.
Thanks.
That's what I do when I'm making a responsive website - I'm constantly changing browser width to make sure it works at all sizes.
It's not enough to just check for the @media sizes - you also need to check the sizes in between in case boxes get shrunk too small to fit their content.
Also, since I tend to use React/Redux lately, I inject size/scroll into my state and use that as a basis for those decisions in controls as often as I'll use CSS/JSS alone anymore.
http://i.imgur.com/cmrn7wB.png
So much empty space on that page, let's put the facebook link in the worst place possible!
EDIT: It's funnier in this case because (based on my limited experiences) this sort of fixed positioned social media bar grew out of mobile websites that were constantly fishing for shares, but this particular site has realized they're annoying and put it in the top header instead. It's only on desktop that we get the fixed position floater.