Angular: как сохранить фиксированный и всегда видимый заголовок при прокрутке списка опций dropdwon

Question

Под моим приложением у меня есть mat-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;

}