Angular：滚动下拉选项列表时如何保持标题固定并始终可见

Question

在我的 App 下，我有一个 ma​​t-select 小部件，它是一个选项列表，我用来在列表中滚动以查看所有选项：

我想在选项列表的顶部添加一个标题，因此，它在滚动时始终保持显示

<mat-select placeholder="Selectionner la boutique"
                        id="libelleShop"
                        #inputSelectShop
                        [(value)]="selectedlibelleShopoValue"
                        ngDefaultControl
                        formControlName="libelleShop"
                        (selectionChange)="onShopSelectionChanged($event)">
              /* THIS IS MY HEADER DIV */
              <div id="myHeader" class="m-2">
                <span class="myHeaderClass"></span>
              </div>
              <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
                          [value]="shop.edoId">
                {{shop.storeName}}
              </mat-option>
</mat-select>

如何将这个 div 固定在顶部，并防止它在滚动到列表底部时消失

建议？

Answer 1

将以下内容添加到您的 css 中（您缺少顶部：xxx px 值），因为这决定了要准确坚持的位置。

.m-2 {
   position: sticky;
   top: 0px;
   z-index:1000;
   margin-bottom: <whatever you need>px;

}