Material: $mdSticky docs don't describe the parent element requirements necessary to make a component sticky

[john-ring]

The docs describe $mdSticky as "The $mdSticky service provides a mixin to make elements sticky." There is no demo.

My understanding of that sentence means that it is similar to position:fixed after you scroll past the element passed to the function, and the element will remain "sticky" on that point on the page.

I created a simple directive that passes the scope and the element into the $mdSticky service. However, nothing happens when you scroll past it, ergo either "sticky" means something completely different than my understanding or the service doesn't work. CodePen example below: (also, this is my first issue, so let me know if I need to provide any other info)

http://codepen.io/JaggyGT/pen/MapxNL

[mckenzielong]

From what I can tell, the container element needs position (absolute or relative work here), a set height (layout-fill works here) and overflow set to auto or scroll. Good news is you can use md-content for this. See: http://codepen.io/mckenzielong/pen/LpyYME

There are still some weird things going on with the margin, but the element is 'sticking'

[john-ring]

So it's a documentation issue then - is there a way to tag this issue to indicate there should be a doc change?

[dtimon]

This is not working in Firefox and IE.. it is a pitty..

[leocaseiro]

:+1: improve docs for $mdSticky

[linslin]

Is $mdSticky working at all? I have not found a working example.

-> http://codepen.io/JaggyGT/pen/MapxNL not working (as descriped by @john-ring )
-> http://codepen.io/mckenzielong/pen/LpyYME (should work but isnt @mckenzielong)

[mckenzielong]

The example codepen I provided was from before Chrome had sticky support added back in. It looks like there are some differences in the implementation, and the way mdSticky worked on browsers without support. MdSticky would work with flex + rows, as per the original codepen.

I have updated the codepen to work again: http://codepen.io/mckenzielong/pen/LpyYME.