New Twiddle

components.toolbar-helper.js

import Ember from 'ember';
import { MDCToolbar } from '@material/toolbar';
import toolbarComponent from 'ember-material-components/components/mdc-toolbar';

export default toolbarComponent.extend({
 init() {
        this._super(...arguments);
    },

    didInsertElement() {
        this._super(...arguments);
        toolbar.fixedAdjustElement = Ember.$('.mdc-toolbar-fixed-adjust')[0];

        var interval = 100;
        this.startWatchingTime(interval);

    },
    startWatchingTime(interval) {
        
        let toolbar = MDCToolbar.attachTo(Ember.get(this, 'element'));

        toolbar.fixedAdjustElement = Ember.$('.mdc-toolbar-fixed-adjust')[0];

        Ember.run.later(() => this.startWatchingTime(interval), interval);
    }

  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

services.my-service.js

import Ember from 'ember';

export default Ember.Service.extend({
});

templates.application.hbs

{{#toolbar-helper isWaterfall=true isFixed=true  isLastRowFixed=true isFlexible=true}}
 <div class="mdc-toolbar__row">
        <section class="mdc-toolbar__section mdc-toolbar__section--align-center">
          <span class="mdc-toolbar__title demo-custom-scroll-title">Hey!</span>
        </section>
      </div>
{{/toolbar-helper}}
  <main>
      <div class="mdc-toolbar-fixed-adjust">
        <p class="demo-paragraph">
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        </p>
        <p class="demo-paragraph">
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        </p>
        <p class="demo-paragraph">
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        </p>
      </div>
    </main>

templates.components.toolbar-helper.hbs

{{yield}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-cli-sass": "7.1.4",
    "ember-material-components": "0.0.4"
  }
}