fix(mdSubheader): Non top-level md-content causes incorrect position.

If the subheader's parent `<md-content>` was not the top-level item,
the stickied subheader would be incorrectly positioned further down
the page.

Also added more tests to toolbar and fixed issue to ensure subheader
works with a toolbar using `md-scroll-shrink`.

Fixes #4420. References #2825. Closes #4439.

src/components/sticky/sticky.js

@@ -70,7 +70,6 @@ function MdSticky($document, $mdConstant, $$rAF, $mdUtil) {
  contentEl.on('$scroll', onScroll);
 
  var self;
- var stickyBaseoffset = contentEl.prop('offsetTop');
  return self = {
  prev: null,
  current: null, //the currently stickied item
@@ -86,7 +85,6 @@ function MdSticky($document, $mdConstant, $$rAF, $mdUtil) {
  // Add an element and its sticky clone to this content's sticky collection
  function add(element, stickyClone) {
  stickyClone.addClass('md-sticky-clone');
- stickyClone.css('top', stickyBaseoffset + 'px');
 
  var item = {
  element: element,

src/components/subheader/demoBasicUsage/index.html

@@ -1,5 +1,9 @@
-
 <div ng-controller="SubheaderAppCtrl" layout="column" flex layout-fill>
+
+ <md-toolbar md-scroll-shrink>
+ <div class="md-toolbar-tools">My Messages</div>
+ </md-toolbar>
+
  <md-content style="height: 600px;" md-theme="altTheme">
 
  <section>

src/components/toolbar/toolbar.js

@@ -68,7 +68,9 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
 
  $mdTheming(element);
 
- setupScrollShrink();
+ if (angular.isDefined(attr.mdScrollShrink)) {
+ setupScrollShrink();
+ }
 
  function setupScrollShrink() {
 
@@ -100,7 +102,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
  // If the scope is destroyed (which could happen with ng-if), make sure
  // to disable scroll shrinking again
 
- scope.$on('$destroy', disableScrollShrink );
+ scope.$on('$destroy', disableScrollShrink);
 
  /**
  *
@@ -115,9 +117,15 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
  onMdContentLoad(null, closestContent);
  }
 
- // Disable only if the attribute's expression evaluates to false
+ // Evaluate the expression
+ shrinkWithScroll = scope.$eval(shrinkWithScroll);
 
- if ( shrinkWithScroll ) disableScrollShrink = enableScrollShrink();
+ // Disable only if the attribute's expression evaluates to false
+ if (shrinkWithScroll === false) {
+ disableScrollShrink();
+ } else {
+ disableScrollShrink = enableScrollShrink();
+ }
  }
 
  /**
@@ -170,7 +178,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
  *
  */
  function enableScrollShrink() {
- if ( !contentElement ) return angular.noop; // no md-content
+ if (!contentElement) return angular.noop; // no md-content
 
  contentElement.on('scroll', debouncedContentScroll);
  contentElement.attr('scroll-shrink', 'true');

src/components/toolbar/toolbar.spec.js

@@ -131,6 +131,17 @@ describe('<md-toolbar>', function() {
  expect($exceptionHandler.errors).toEqual([]);
  }));
 
+ it('disables scroll shrink when the attribute is not provided', inject(function() {
+ build(
+ '<div>' +
+ ' <md-toolbar></md-toolbar>' +
+ ' <md-content></md-content>' +
+ '</div>'
+ );
+
+ expect(element.find('md-content').attr('scroll-shrink')).toEqual(undefined);
+ }));
+
  it('enables scroll shrink when the attribute has no value', function() {
  build(
  '<div>' +
@@ -142,9 +153,37 @@ describe('<md-toolbar>', function() {
  expect(element.find('md-content').attr('scroll-shrink')).toEqual('true');
  });
 
- function build(template) {
+ it('disables scroll shrink if the expression evaluates to false', function() {
+ var pageScope = $rootScope.$new();
+
+ // Set the value to false
+ pageScope.$apply('someValue = false');
+
+ // Build the element
+ build(
+ // Pass our template
+ '<div>' +
+ ' <md-toolbar md-scroll-shrink="someValue"></md-toolbar>' +
+ ' <md-content></md-content>' +
+ '</div>',
+
+ // Pass our custom pageScope
+ pageScope
+ );
+
+ // Check that scroll shrink is disabled
+ expect(element.find('md-content').attr('scroll-shrink')).toEqual('false');
+ });
+
+
+ function build(template, scope) {
  inject(function($compile) {
- pageScope = $rootScope.$new();
+ if (scope) {
+ pageScope = scope
+ } else {
+ pageScope = $rootScope.$new();
+ }
+
  element = $compile(template)(pageScope);
  controller = element.controller('mdToolbar');