Ember CLI throwing "unexpected token" for Jquery script

Question

I'm writing a script to change the header after scrolling a certain number of pixels

import Ember from 'ember';

export default Ember.Component.extend({  
    $(window).scroll(function() {
        var value = $(this).scrollTop();
        if ( value > 49 )
            $("#header-scroll").css({"height": "50px", "opacity": "1"});
        else
            $("#header-scroll").css({"height": "0px"});
    });
});

Ember CLI is throwing this error:

SyntaxError: keyphrame/components/header-view.js: Unexpected token (4:11)

I've just started playing with Ember, so any advice or suggestions are more than welcome

Answer 1

You should not put that in there.

There is didInsertElement hook. It's called when the component inserted in DOM.

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    $(window).scroll(function() {
      var value = $(this).scrollTop();
      if (value > 49)
        $("#header-scroll").css({
          "height": "50px",
          "opacity": "1"
        });
      else
        $("#header-scroll").css({
          "height": "0px"
        });
    });
  }
});