Get clientheight dom is wrong when scrolling fast

i am trying to create parallax header so when you scroll bottom get scrollTop value and decrease from ion-toolbar height so toolbar going to be shorter thatn before and otherwise when you try to scrolldown get scrollTop value and increase to height of ion-toolbar.
i did it but when i scroll faster normal scrollTop or other detail so can help me goes to be wrong.
how can i force user scrolling top and down with normal speed always thanks
this is my code

Screen Shot 1399-09-12 at 17.57.33


selector: ‘[fadeHeader2]’
export class FadeHeader2Directive {
@Input(‘fadeHeader2’) toolbar: any;
public clientHeight = 200;

constructor(public renderer2: Renderer2, private element: ElementRef, public domCtrl: DomController) { }

ngOnInit() {

this.toolbar = this.toolbar.el;


tmp = 0;
@HostListener(‘ionScroll’, [’$event’]) onContentScroll($event) {

let scrollTop = $event.detail.scrollTop;
let hex = scrollTop.toString(16)
console.log("top" + scrollTop);

if (scrollTop >= 1 && scrollTop < 133 ) {
  this.tmp = this.clientHeight - scrollTop;

  this.domCtrl.write(() => {'height', `${this.tmp}px`);
    //'transition', `border-bottom box-shadow 100ms`);

    //'border-bottom', `0.5px solid rgb(0 0 0 / 64%)`);'box-shadow', `0px 3px 8px -2px rgba(0,0,0,0.75)`);

if (scrollTop <= 5) {
  console.log("here camtar az zero")
  //'transition', `border-bottom box-shadow 100ms`);'border-bottom', `none`);'box-shadow', `none`);