ng2: Managing multiple, fixed-position HTML elements
<p>I'm building a rich page that will feature a fixed position bar at the top of the page. Depending on user activity, there may be multiple bars that I want to appear stacked at the top of the page, e.g.:</p>

<p><a href="https://i.stack.imgur.com/7NVcF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7NVcF.png" alt="Basic example"></a></p>

<p>In this example, Bar1 might be a site navigation bar, Bar2 might be a notification/warning, and Bar3 is a component that does yet another thing.</p>

<p>Any of these bars might be added or removed from the top section at any time (e.g. they may only appear when the user scrolls a certain distance).</p>

<p>Due to Angular 2's view encapsulation, and the overall focus on component encapsulation, this seems a lot more challenging then I thought it would be.</p>

<p>The conventional HTML way of doing this is to have a single fixed-position container at the top of your document, and allow all the elements within that container to position themselves:</p>

<pre><code>&lt;div style="position: fixed"&gt;
  &lt;div&gt;Bar1&lt;/div&gt;
  &lt;div&gt;Bar2&lt;/div&gt;
  &lt;div&gt;Bar3&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The other option I'm aware of is to declare fixed position elements anywhere I want, and use the top/left CSS properties to ensure they display in the correct coordinates.</p>

<p>I'm open to any better ideas on solving this problem. I have been trying to make a solution like this work:</p>

<p>(Fixed header component renders the fixed position container)</p>

<pre><code>@Component({
  template: `
  &lt;div style="position: fixed"&gt;
      &lt;div *ngFor="let element of fixedHeaderService.elements"&gt;
          &lt;ng-content="element"&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
  &lt;/div&gt;
`}) 
export class FixedHeaderComponent{
  constructor(private fixedHeaderService: FixedHeaderService){}
}
</code></pre>

<p>Service tracks the components/elements it's displaying "upstairs"</p>

<pre><code>@Injectable()
export class FixedHeaderService{
  elements: HTMLElement[];

  addToTop(element: HTMLElement){
    this.elements.push(element);
  }
}
</code></pre>

<p>Generic component that contains a (partial) template that should be displayed as a child of FixedHeaderComponent's DOM element)</p>

<pre><code>@Component({
  template: '&lt;div #elem&gt;Bar 3&lt;/div&gt;'})
  export class Bar3Component{
  @ViewChild('elem') elem: HTMLElement;

  constructor(private fixedHeaderService: FixedHeaderService){}

  // Fires when we want our element moved to the fixed position container
  moveToTopEvent = ():void =&gt; {
    this.fixedHeaderService.addToTop(this.elem);
  }
}
</code></pre>

<p>This code obviously doesn't work - ng-content doesn't work that way, and this pseudo code raises a bunch of extra questions. The general idea, though, is that components can decide when they need to become fixed, and somehow get pushed into the component that displays the fixed items together.</p>

<p>My question, then is more like:</p>

<p>Can I continue developing this idea to provide an elegant way of displaying fixed position items in a single container, or is this doomed to failure?</p>

<p>Secondly, is there an overall better way I can solve this problem?</p>