title: Angular 6 track scroll position of div within div
body: <p>I am trying to create a directive that tracks the Y position of the element it is placed on - when this element reaches the top of the parent div, I will add sticky styling to make the header stick to the top until the whole element has been scrolled.</p>
  
  <p>I have tried to track the scrolling, but can't get any output apart from the initial ngoninit log:</p>
  
  <pre><code>import { Directive, OnInit, ElementRef, HostBinding, HostListener } from '@angular/core';
  
  @Directive({
      /* tslint:disable-next-line:directive-selector */
      selector: '[stickyHeaderDirective]'
  })
  export class StickyHeaderDirective implements OnInit {
  
  
      ngOnInit() {
          console.log('lets track ths scroll');
      }
  
      constructor() {}
  
      @HostListener('scroll', ['$event']) private onScroll($event: Event): void {
          console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
      }   
  }
  </code></pre>
  
  <p>What am i missing?</p>