Hey there! I'm working on an Angular application where I've set up sticky Filters and Header rows using HostListener and window scroll. However, I've encountered a small issue where the content of both the Header and filters overlaps with the results when users scroll down.
I could really use some assistance in resolving this overlap situation.
Check out my demo here: -
https://i.sstatic.net/26ICu.png
Here's a snippet of my FILTERS code:html
<div class="filters-data" [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky}">
<div class="im-results">
<div>
<strong>{{ Amazon Data }} </strong> match
</div>
</div>
<div class="filters-data-result">
<app-filters-data-result *ngFor="let item of filters; let i = index" [item]="item" (onRemoved)="remove(item)">
</app-filters-data-result>
</div>
</div>
CSS section
.mat-elevation-z5 {
position: relative;
}
.sticky {
position: fixed;
top: 100px;
}
div.filters-data {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
align-content: flex-start;
padding: 20px 0;
.im-results {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
font-size: 18px;
}
.filters-data-result {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
margin-right: 8px;
}
}
.ts
isSticky: boolean = false;
@HostListener('window:scroll', ['$event'])
checkScroll() {
this.isSticky = window.pageYOffset >= 10;
}
HEADER CODE
html
<div class="header-top bottom-border mb-10" [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky }">
<div class="am-ctnr rows-header">
<div class="im-header-product">
<div> Products</div>
</div>
<div class="im-number">
<div> Number</div>
</div>
<div class="shippment-number">
<div>Shipment Number</div>
</div>
<div class="origin">
<div>
Origin
</div>
</div>
<div class="size">
<div>
Size
</div>
</div>
</div>
</div>
CSS
.header-top{
.im-error-notification-div{
overflow:hidden;
.im-error-notification-inner{
float:right;
}
}
&.bottom-border {
border-bottom: 1px solid am-colors.$ash-grey;
}
.mb-10 {
margin-bottom: 10px;
}
.am-ctnr {
display: flex;
padding: 5px 16px 10px;
align-items: baseline;
flex-wrap: wrap;
@media #{am-responsive-breakpoints.$screen-xs-sm-md}{
display: none;
}
&.rows-header {
font-family: am-fonts.$am-font-family-bold;
font-size: 11px;
font-weight: bold;
justify-content: space-between;
.im-header-product{
padding: 5px;
width: 30%;
}
.im-header-catalog{
padding: 5px;
width: 10%;
}
.im-header-lot-number{
padding: 5px;
width: 10%;
}
.im-header-origin{
padding: 5px;
width: 10%;
}
.im-header-unit-size{
padding: 5px;
width: 5%;
min-width: 60px;
}
.im-header-item-price{
padding: 5px;
width: 10%;
}
}
}
}