Component CSS behavior in Angular2

I am opening this post because I have a doubt relative with CSS Angular2 Components.

Basically, I bought a template and I am passing it to components in Angular2. In the original template the header is stuck when scrolling down the page and this behavior is done with a library called Sticky-kit.js which adds a "is_stuck" class to the html tag, in this case the header tag, when scrolling is detected. In the template the html header tag is inside a div with "main-wrapper" class which has width to 100% only. Everything works fine in original template.

When I passed the header to a component and run the application the library sticky-kit.js works fine because adds the appropriate "is_stuck" class but despite of the class the header doesn't get stuck. The library looks for a class ".topbar" in html, when it finds the corresponding element, it concats the "is_stuck" class.

I am trying to figure out why this is happening.

I did some tests, one of them were put the header code outside the component (son of "main-wrapper" div) as the original template structure and it works fine, but, when I get back the code inside the component it does not work anymore. In the original template the header's parent is:

<div class="main-wrapper"></div> 

but in angular structure the header's parent is the component itself.

This is the structure that I am implementing:

<div id="main-wrapper">
  <app-header></app-header>
  <app-menu></app-menu>
  <div class="page-wrapper">...</div>
</div>

and I can get stuck the header as follow:

<div id="main-wrapper">
  <header>code here</header> <----------
  <app-menu></app-menu>
  <div class="page-wrapper">...</div>
</div>

I am thinking that this behavior happens because the component encapsulation and I don't want to put the header code outside the header component.

Would someone help?

Thanks!