[new design] design-proposal: subhead on scroll

[svom]

I would recommend to adjust the styling of the subhead so that it fits better to the header. Changes made: Set the background-color to white, took the box shadow of the header, adust width to calc(100+30px), margin-left: -15px; increased horizontal-padding.

Current state:

Proposal:

[ciar4n]

@dgrammatiko To achieve this we need an event listener for when the CSS property position:sticky actually 'sticks'. Something like what is suggested here.. https://developers.google.com/web/updates/2017/09/sticky-headers

Possible?

[dgrammatiko]

It requires intersection observer which is not widely supported: https://caniuse.com/#feat=intersectionobserver

But it's polyfillable: https://github.com/w3c/IntersectionObserver/tree/master/polyfill

There is one thing that is lose ATM: we don't have a definite way of dealing with polyfills in J4. That's something that was discussed few times in the JS group but we still don't have a resolution or any code...

[dgrammatiko]

Just to add that next version of Safari will also support it: https://webkit.org/status/#?search=intersection

[brianteeman]

iirc the status "in development" means that it is for the version after the next as it moves from "supported in preview" to "release"

anyway it doesnt matter as we would require a polyfill anyway for ie11

[dgrammatiko]

You're right, todays release of TP doesn't support it, so probably it will take some more months...

[brianteeman]

I am always right it just takes some of you a while to realise ;)