In Angular application I am making Filters and Header row element sticky. I am using HostListener and windowscroll to achieve this functionality. The problem I am facing is Header and filter content is overlapped with the results when user scroll down.

在角度应用程序中，我使过滤器和标题行元素具有粘性。我正在使用HostListener和windowscroll来实现此功能。我面临的问题是当用户向下滚动时，标题和过滤器内容与结果重叠。

I need help to fix this overlap.

我需要帮助来修复这个重叠部分。

Link to demo - https://screenrec.com/share/XKtIZji2lY

链接到演示-https://screenrec.com/share/XKtIZji2lY

FILTERS Code

过滤器代码

html

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

.css

    
.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

.ts

  isSticky: boolean = false;

  @HostListener('window:scroll', ['$event'])
  checkScroll() {
    this.isSticky = window.pageYOffset >= 10;
  }

HEADER CODE

表头代码

html

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>Shippment Number</div>
            </div>
            <div class="origin">
                <div>
                    Origin
                </div>
            </div>
            <div class="size">
                <div>
                     Size
                </div>
            </div>
        </div>

    </div>

.css

.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%;
            }
        }

    }
}

I guess you should use z-index and background-color to put header over the content.

我想您应该使用z索引和背景色来将标题放在内容之上。

for example:

例如：

z-index: 99;
background-color:#fff;