This should prevent the bounce from triggering the transition effect. Granted the header will only come back into view when you are less than 50px from the top. For me this is perfectly acceptable. Probably a better solution for people who want the header to come back into view as soon as scrolling towards to top is started, but this is a starting point for you.
Additional the transition will only trigger once you are > 30px away from the top of the screen. Once again this is perfectly suitable for my use case, but you may want to adjust it for yours.
just thought i'd add this in here in case anyone was having issues with iOS overscroll / bounce effect messing with this directive.
onContentScroll(event) { if (event.directionY == "down" && event.scrollTop > 30) { this.renderer.setElementStyle(this.header, 'top', '-56px'); // this.renderer.setElementStyle(this.footer, 'bottom', '-56px'); } else if(event.directionY == "up" && event.scrollTop < 50) { this.renderer.setElementStyle(this.header, 'top', '0px'); // this.renderer.setElementStyle(this.footer, 'bottom', '0px'); } }This should prevent the bounce from triggering the transition effect. Granted the header will only come back into view when you are less than 50px from the top. For me this is perfectly acceptable. Probably a better solution for people who want the header to come back into view as soon as scrolling towards to top is started, but this is a starting point for you.
Additional the transition will only trigger once you are > 30px away from the top of the screen. Once again this is perfectly suitable for my use case, but you may want to adjust it for yours.