角材料固定的侧杆头不是固定的

Question

我试图将Angular材质创建为Fixed side nav ，但是我在项目中遇到了一些冲突，我的问题是side bar标头不固定，我添加了内容详细信息并滚动了内容，然后标头被隐藏了，

在此处堆叠闪电战代码

我该如何解决此问题，请帮助我解决此问题

谢谢。

我的密码

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

如@Deepu在他的回答中所述，添加z-index:2将确保header保留在sidenav顶部。

但是，如果sidenav中的链接超出了其容纳的范围，则会造成问题。 因此，与设置z-index一起，计算sidenav的高度是更好的选择。

为此，只需添加height: calc(100% -120px); 在.example-container类中。 我要从100％的高度中减去120px，因为那是Header的高度和footer的高度之和。

这是有效的stackblitz 演示和代码链接。

Answer 2

您必须设置fixedInViewPort属性。

[fixedInViewport]="true"

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

Answer 3

将class example-header z-index值设为2

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

stackblitz链接