I came across a discussion about sticky headers and implemented the following Angular layout:
<div fxLayout="column">
<div class="sticky">
<app-header></app-header>
<app-navbar></app-navbar>
</div>
<div fxLayout="row" fxFlex="100">
<div class="my-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
After applying the sticky CSS to make the header and navbar stay at the top while scrolling, everything seems to be functioning correctly. However, as I scroll and the main content moves up, it does not disappear beneath the header section. The labels, textboxes, and grid elements remain visible.
I tried adding styles to "my-content" div with overflow set, but the issue persists:
.my-content {
padding: 0 15px;
width: 100%;
overflow: hidden !important;
}
I've reviewed the post multiple times but still can't figure out how to make the content hide under the banner. Any assistance would be greatly appreciated. Thank you!
https://stackblitz.com/edit/angular-9-0-0-rc-1-ccgxry?file=src%2Fstyles.scss