CSS-粘性标题内容与滚动重叠

Question

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

我需要帮助来解决这个重叠问题。

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

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

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

标题代码

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

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

    }
}

Answer 1

我想你应该使用 z-index 和背景颜色将标题放在内容上。

例如：

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