md-sticky-clone element and class is not added for browsers that support position: sticky

[mtraynham]

As shown in the demo of the complex dialog (using Chrome), you can achieve a drop shadow by styling md-sticky-clone, which is also a md-subheader classed element. This is not generated in browsers such as Firefox, because the code circumvents creating that element if position: sticky is supported. https://github.com/angular/material/blob/master/src/components/sticky/sticky.js#L45-L51

If it is supported, a bound scroll event could be added to check if the element's scrollTop is greater than 0. If that is the case, it could add the md-sticky-clone class to the element and styling would work appropriately.

[ThomasBurleson]

See recent releases ^ v0.11.0-rc2.

[vladimir-barsuchenko]

Faced the same issue. My goal is different styles for .md-sticky-clone. Plus I need to hide it and show on scroll event without touching original sticky element.

My idea is to make browserStickySupport optional

and change

https://github.com/angular/material/blob/master/src/components/sticky/sticky.js#L74-L81

to

function MdSticky($mdConstant, $$rAF, $mdUtil, $compile) {

  /**
   * Registers an element as sticky, used internally by directives to register themselves
   */
  return function registerStickyElement(scope, element, stickyClone, stickySupport) {
    var browserStickySupport = stickySupport || $mdUtil.checkStickySupport();

Can provide PR

[nerdo]

You can make browserStickySupport whatever you want with a decorator. In this example, I turn it off completely because I found it to be problematic:

angular.module('myApp', [])
    .config(['$provide', function ($provide) {
        $provide.decorator('$mdUtil', ['$delegate', function ($delegate) {
            // Turn off native browser sticky support since it's problematic
            $delegate.checkStickySupport = function() {
                return false;
            };
            return $delegate;
        }]);
    }]);