En la aplicación Angular, intento reducir el componente del encabezado del encabezado Sticky cuando el usuario se desplaza hacia abajo. Actualmente, el encabezado adhesivo funciona bien.

What changes do I need to make to display lower half of header with no text when user scroll down?

Actual component

Expected Output when user scrolls down : hace que el texto desaparezca y muestre el encabezado como fijo que muestra el 75% inferior del componente

Esto es lo que he intentado hasta ahora, lo que hace que todo el componente se vuelva pegajoso cuando el usuario se desplaza hacia abajo.

html

 <div class="header-comp" [class.sticky] = "sticky" #stickyMenu> <p class="text">Header</p> <div class="placeholder"> //placeholder </div> </div> <div class="dropdowns"> //dropdown </div> <div class="btn"> Button </button> </div> </div>

.scss

 .header-comp { width: 100%; height: 148px; background: grey; border-radius: 0px; } .sticky{ position: fixed; top: 0; overflow: hidden; z-index: 10; transition: 0.90s; } .content{ height: 300vh; } .text { width: 390px; height: 26px; color: tf-colors.$white; font-size: 21px; font-family: Arial; letter-spacing: 0px; line-height: 26px; margin-left: 98px; padding-top: 40px; }

.ts

 sticky: boolean = false; @ViewChild('stickyMenu') menuElement: ElementRef; menuPosition: any; ngAfterViewInit(){ this.menuPosition = this.menuElement.nativeElement.offsetTop console.log('mE',this.menuElement) } @HostListener('window:scroll', ['$event']) handleScroll(){ const windowScroll = window.pageYOffset; console.log(windowScroll) if(windowScroll >= this.menuPosition){ this.sticky = true; } else { this.sticky = false; } }