Угловой материал фиксированной боковой панели заголовка не является фиксированным

Question

Я пытался собрать Угловой материал. Исправлена ​​боковая навигация , но я столкнулся с некоторым конфликтом в моих проектах. Моя проблема с заголовком боковой панели не исправлена, я добавил детали содержимого и прокручивал содержимое, затем заголовок скрылся,

Блиц-код стека здесь

как я могу решить эту проблему, пожалуйста, помогите мне решить эту проблему

Спасибо.

Мой код

sidenav-fixed-example.html

 <mat-toolbar class="example-header">Header</mat-toolbar>

  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened class="example-sidenav">
    <mat-nav-list>
      <!-- Sidebar -->
      <ul class="sidebar navbar-nav" >
        <div class=" fixed-search " >
          <div class="sidebar-date-and-time">


      <span class="side-mnu" routerLink='/home'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-home"></i></div>
           <div class="p-2 bd-highlight txt-sm">Home</div>
              </div>
                 </span>


            <span class="side-mnu-active"  routerLink='/categories'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-list"></i></div>
           <div class="p-2 bd-highlight txt-sm">Categories</div>
              </div>
                 </span>



            <span class="side-mnu" routerLink='/customerdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-users"></i></div>
           <div class="p-2 bd-highlight txt-sm ">Customers</div>
              </div>
                 </span>


            <span class="side-mnu" routerLink='/orderdetails'>
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-shopping-bag"></i></div>
           <div class="p-2 bd-highlight txt-sm">Orders</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-clipboard-check"></i></div>
           <div class="p-2 bd-highlight txt-sm">Sales Items</div>
              </div>
                 </span>




            <span class="side-mnu">
        <div class="d-flex flex-row bd-highlight mb-3">
         <div class="p-2 bd-highlight"><i class="fas fa-bullhorn"></i></div>
           <div class="p-2 bd-highlight txt-sm">Announcements</div>
              </div>
                 </span>

          </div>


        </div>
        <!--side bar-->

      </ul>

    </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content >

     Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
    </mat-sidenav-content>
  </mat-sidenav-container>

  <mat-toolbar class="example-footer">Footer</mat-toolbar>

.css

.example-container {
  position: absolute;
  top: 60px;
  bottom: 60px; height: 100%;
  left: 0;
  right: 0;
}

.example-sidenav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  background: rgba(255, 0, 0, 0.5);
}

.example-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.example-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Answer 1

Дайте z-index значение как 2 для класса example-header

.example-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
}

ссылка на стек *

Answer 2

Как сказал @Deepu в своем ответе, добавление z-index:2 гарантирует, что header останется поверх sidenav.

Однако это создаст проблему, если ссылки в sidenav больше, чем может вместить.Так что вычисление высоты sidenav является лучшим выбором наряду с установкой z-index.

. Для этого просто добавьте height: calc(100% -120px); в .example-container класс.Я вычитаю 120px из 100% высоты, потому что это сумма высоты заголовка и высоты нижнего колонтитула.

Вот рабочая ссылка на стек demo и code link.

Answer 3

Необходимо установить свойство fixedInViewPort.

[fixedInViewport]="true"

<mat-sidenav #sidenav mode="side" opened class="example-sidenav"  [fixedInViewport]="true" >