Skip to content

Instantly share code, notes, and snippets.

@bekzod
Created January 4, 2016 16:43
Show Gist options
  • Save bekzod/0be411abf445bfbc5664 to your computer and use it in GitHub Desktop.
Save bekzod/0be411abf445bfbc5664 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
{{#sticky-header}}
sticky content
{{/sticky-header}}
import Ember from 'ember';
const { $, run, computed } = Ember;
export default Ember.Component.extend({
classNames:['sticky-header-container'],
classNameBindings: ['isSticky'],
topPos: 0,
isSticky: false,
onWindowScroll(e) {
let scroll = $(e.currentTarget).scrollTop();
let topPos = this.get('topPos');
if (scroll > topPos) {
this.set('isSticky', true);
} else {
this.set('isSticky', false);
}
},
didInsertElement() {
this._super(...arguments);
this._windowScroll = run.bind(this, 'onWindowScroll');
$(window).on('scroll', this._windowScroll);
this.set('topPos', this.$('.sticky-header').offset().top);
},
willRemoveElement() {
$(window).off('scroll', this._windowScroll);
this._super(...arguments);
}
});
<div class='sticky-header'>
{{yield}}
</div>
html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
body {
height: 2000px;
padding-top: 200px;
}
.sticky-header-container {
height: 100px;
width: 100%;
text-align: center;
}
.sticky-header-container .sticky-header {
height: 100px;
width: 100%;
background: green;
}
.sticky-header-container.is-sticky .sticky-header {
position: fixed;
top: 0;
}
{
"version": "0.5.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment