subheader: sticky subheaders have incorrect styles in browsers that support position: sticky

[kylemacfarlane]

When you scroll sticky subheaders in a browser that doesn't support position sticky (e.g. Chrome <= 55) there will be a shadow underneath. However on browsers that do support it (Chrome >= 56, Firefox, etc) there is no shadow.

The bug is evident in the demos: https://material.angularjs.org/HEAD/demo/subheader

The problem seems to be that when sticky support is detected the sticky-state attribute is never added because setupSticky and thus onScroll aren't called.

[Splaktar]

Sorry for the delay in responding to this issue.

However, since the required issue template wasn't used, I don't have enough information to take any action here. The issue is that the md-subheader has a shadow when it should not? Can you please post a screenshot with an arrow to the offending shadow?

Can you please provide more details about the classes applied to the md-subheader and which you think are wrong or are missing?

Are you still seeing this in AngularJS Material 1.1.11? What OS?

[kylemacfarlane]

The issue is that sticky headers don't have a shadow when they should. This is because the sticky service was created before widespread native position sticky support and never worked properly.

Scrolled sticky headers are supposed to have a drop shadow:

material/src/components/subheader/subheader.scss

Line 43 in 41c9d00

animation: subheaderStickyHoverOut 0.3s ease-out both;

This style is applied when an element has the attribute stick-prev-state="active" which is applied by the $mdSticky service:

material/src/components/sticky/sticky.js

Line 292 in 41c9d00

function setStickyState(item, state) {

The problem is that the $mdSticky service doesn't setup the scroll listeners which set the state if native position sticky support is detected:

material/src/components/sticky/sticky.js

Line 85 in 41c9d00

if (browserStickySupport) {