sticky header

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
   repositionStickyEditor: function () {
    let top = -$(window).scrollTop();
      $('.sticky').css('transform', `translateY(${top <= 84 ? 8- top : 0}px) translateZ(0)`)
      // this.repositionStickyEditor();
    // });
  }.on('didInsertElement'),
 
   onScroll: function(){
    this.repositionStickyEditor()
   },


  startScrollListener: function () {
    this.onScroll = this.onScroll.bind(this);
    $(window).on('scroll', this.onScroll).scroll();
  }.on('didInsertElement'),

  stopScrollListener: function () {
    $(window).off('scroll', this.onScroll);
  }.on('willDestroyElement'),
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component}}
<br>
<br>

templates.components.my-component.hbs

<div class="sticky">sticky</div>
<div class="" style="height: 50000px">contents</div>

twiddle.json

{
  "version": "0.4.7",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.7/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember-template-compiler.js"
  }
}