Closed mtraynham closed 9 years ago
See recent releases ^ v0.11.0-rc2.
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
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;
}]);
}]);
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 amd-subheader
classed element. This is not generated in browsers such as Firefox, because the code circumvents creating that element ifposition: sticky
is supported. https://github.com/angular/material/blob/master/src/components/sticky/sticky.js#L45-L51If 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.