如何在側面模式（角材料）下將 mat-toolbar 和 sidenav 保持在頂部？

Question

我想將 mat-sidenav 置於側邊模式。 但我也想在頂部有mat-toolbar 。

問題是當我滾動到底部的mat-menu和 sidenav 上升時，我希望它們留在原地（總是在頂部）。

我嘗試將position:fixed;width:100%為mat-toolbar但 div 增長，因此它隱藏了主頁按鈕。 所以這是行不通的。

position: sticky;top: 0; 也不工作。

知道如何正確地做到這一點嗎？

stackblitz 中的完整代碼

Answer 1

您應該將 position:fixed 添加到您的案例mat-sidenav 和 mat-toolbar的上層元素，或者您可以簡單地添加一個 CSS 類，如下所示：

.fixedElement{
position: fixed;
}

並將其分配給您的 Elements mat-sidenav 和 mat-toolbar

或者您可以簡單地將內聯 CSS 添加到您的元素中，如下所示：

<mat-sidenav style="position:fixed" mode="side" [(opened)]="opened" (opened)="events.push('open!')"
    (closed)="events.push('close!')">
    Sidenav content
</mat-sidenav>

工作StackBlitz示例

更新

當位置設置為固定時，標題隱藏在內容后面，但是將 z-index:1000 添加到 #header css，並將 padding-top 添加到正文 css，它應該比標題的高度高一點。 例如，如果標題的高度是 40px，將 padding-top: 50px 放在 body css 上，它應該可以工作。

Answer 2

我正在處理與<mat-sidenav mode="side">固定標題幾乎相同的問題。

sidenav可以很容易地用 css 規則position: fixed

標題有兩個問題：

• 主要是當我們打開 sidenav 時，帶有position:fixed的標題沒有調整寬度（無法通過粘性定位解決）
• 第二個是對於具有動態高度的標題，某些內容將隱藏在標題下（對於固定高度，我們只需要將內容元素的上邊距設置為固定值即可緩解此問題）

主要問題的解決方案是跟蹤<mat-sidenav-content>的寬度並相應地調整標題的寬度。

第二個問題的解決方案類似於第一個問題 - 跟蹤標題的高度並調整標題下元素的上邊距。

在這兩種情況下，都可以設置一個 css 變量並將其用於元素樣式，而不是直接設置元素的高度。 我的例子展示了兩種方式。

讓我們看看它是如何工作的。

我們需要一個指令來跟蹤調整大小事件。

import {
  Directive,
  ElementRef,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';
import { Subject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';


export interface Size {
  width: number;
  height: number;
}

@Directive({
  selector: '[myResize]',
})
export class ResizeDirective implements OnInit, OnDestroy {
  private resizeSubject = new Subject<Size>();
  private resizeObserver: ResizeObserver;

  @Output() myResize = this.resizeSubject.pipe(
    distinctUntilChanged(
      (a: Size, b: Size) => a.width === b.width && a.height == b.height
    )
  );

  constructor(private el: ElementRef) {
    this.resizeObserver = new ResizeObserver((entries) => {
      const size = {
        width: Math.trunc(entries[0].contentRect.width),
        height: Math.trunc(entries[0].contentRect.height),
      };
      this.resizeSubject.next(size);
    });
  }

  ngOnInit() {
    this.resizeObserver.observe(this.el.nativeElement);
  }

  ngOnDestroy() {
    this.resizeObserver.unobserve(this.el.nativeElement);
  }
}

然后我們將指令應用於 header 和 sidenav-content 元素。

<mat-sidenav-container class="container" autosize>
  <mat-sidenav class="sidenav" mode="side">
    Some navigation that expands from the side and thus shrinks the  &lt;mat-sidenav-content&gt;
    because of mode=side
  </mat-sidenav>

  <mat-sidenav-content #content class="sidenav-content" (myResize)="onContentResized($event)">
    <my-header class="header" (myResize)="onHeaderResized($event)"></my-header>
    <div class="content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

組件代碼。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  @ViewChild('content') content!: MatSidenavContent;

  constructor(
    private renderer: Renderer2
  ) {}

  onContentResized(event: any) {
    console.log('on content resized event', event);

    //I am creating a css variable on <mat-sidenav-content> where my header and the main content element are located
    // thus the variable will be available to all descendants 
    this.renderer.setStyle(
      this.content.getElementRef().nativeElement,
      '--content-width',
      event.width + 'px',
      RendererStyleFlags2.DashCase
    );
  }

  onHeaderResized(event: any) {
    console.log('on header resized event', event);

    //I am setting the margin on content element directly
    this.renderer.setStyle(
      this.content.getElementRef().nativeElement,
      'margin-top',
      event.height + 'px',
      RendererStyleFlags2.DashCase
    );
  }
}

而對於樣式表。

.sidenav {
  position: fixed;
}

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: var(--content-width, 100%);
}

注意：我只包含了代碼的關鍵部分來解釋解決方案。

如果有人有針對此問題的純 css 解決方案，請不要猶豫與我們分享。 我做了一些研究，但唯一可行的解​​決方案似乎是通過編碼。