ember-sticky

components.in-viewport.js

import Ember from 'ember';
import InViewportMixin from 'ember-in-viewport';

const { Component, computed, String: { htmlSafe } } = Ember;

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}

export default Component.extend(InViewportMixin, {
  
  classNames: ['sticky-wrapper'],
  attributeBindings: ['style'],
  
  style: computed('wrapperHeight', function() {
    let wrapperHeight = this.get('wrapperHeight');
    return wrapperHeight ? htmlSafe(`height: ${wrapperHeight}px;`) : null;
  }),
    
  init() {
    this._super(...arguments);
    this.set('viewportSpy', true);
  },
  
  didEnterViewport() {
    console.log('entered');
    this.set('fixed', false);
    this.set('wrapperHeight', null);
  },

  didExitViewport() {
    console.log('exited');
    this.set('wrapperHeight', outerHeight(this.element.children[0]));
    this.set('fixed', true);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions:{
		getHeight(){
      let ele = Ember.$('.scrollable');
      this.set('test', ele.height());
		}
	}
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.scrollable {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: auto;
  background-color: grey;
  border:5px solid green;
}

.header {
  height: 50px;
  background-color: yellow;
  padding: 10px;
}

.secondary-header {
  height: 50px;
  background-color: red;
  padding: 10px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.body {
  padding: 10px;
  height: 1000px;
}

templates.application.hbs

<div class="scrollable">
	<div class="header">
  	I'm a normal header. <button {{action 'getHeight'}}>scrollable height</button> {{test}}
  </div>
  
  {{#in-viewport as |isFixed|}}
  	<div class="secondary-header {{if isFixed "fixed"}}">
    	I am
      {{#if isFixed}}
      	fixed. Scroll up.
      {{else}}
      	not fixed. Scroll down.
      {{/if}}
    </div>
  {{/in-viewport}}
  
  <div class="body">
  	Lorem ipsum dolor sit amet, semper atomorum eum ex, vis mazim laoreet debitis in. In pri dico volutpat. Quem esse quas nec no, et nam nostro adolescens. Ut eam graeco volumus, at vim tale inani, no pri discere lobortis.

At solum singulis est. Amet accusam eleifend et eam. Cu primis hendrerit his, ut sit graeco semper, ne nam expetenda gloriatur. Augue audiam gubergren et duo, cum eirmod ornatus urbanitas te, est epicuri vituperatoribus an. Vis an tempor salutandi, sed an magna inermis percipit.

Pro inermis nusquam erroribus ut, aliquip pertinacia eu est, eu cum iudico democritum. At quo alienum sensibus, ex dico esse justo eum. Cu vel prima inciderint appellantur, ad usu habeo pertinax scriptorem, ius et magna percipit. Ut quo quot patrioque sententiae, eum tacimates salutandi ut. Agam maiorum imperdiet quo ut, his oratio singulis ei, te est dicam imperdiet. Ne habemus forensibus deterruisset vim, at sea tamquam meliore.

Cum ludus principes in, eam no unum modus alienum. Inani honestatis inciderint quo eu, ei usu minim officiis, ei cotidieque disputationi interpretaris pri. Adhuc affert no his, usu et tation referrentur. Et doctus omittantur sea, eam etiam melius eu, dicunt appareat scriptorem in mea. Ius clita fierent ne, te est accusata concludaturque. Omnium sapientem sea cu. Ut falli nostro audire vis, vix persius appellantur ei.

An eius tacimates mediocrem vim, mel ut decore mediocritatem. Vix altera iriure at, ea stet scaevola complectitur sed. Ex mel viderer democritum efficiantur. Vim solum vocent gubergren an, mei at affert partiendo assueverit. No eum idque dolorem, ne posidonium adversarium qui.
  </div>
</div>

templates.components.in-viewport.hbs

{{yield fixed}}

twiddle.json

{
  "version": "0.10.6",
  "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.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-in-viewport": "2.1.0"
  }
}