Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality.
How can I adjust the display of the lower half of the header to show no text when the user scrolls down?Here is the current component:
https://i.sstatic.net/OGCxM.png
Desired Output when user scrolls down:This is what has been attempted so far, which results in the entire component becoming sticky when the user scrolls down
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;
}
}