如何在侧面模式(角度材质)下保持垫子工具栏和侧导航在顶部

Question

我想将mat sidenav置于侧面模式。但我也想把CCD_ 1放在上面。

问题是，当我滚动到mat-menu的底部时，侧导航会向上，我希望它们保持原位(始终在顶部(。

我试图将position:fixed;width:100%设置为mat-toolbar，但是div是grow，所以它隐藏了home按钮。所以这不是工作。

CCD_ 5也不工作。

知道如何正确地做吗？

堆叠式中的完整代码

Answer 1

我处理的问题与使用<mat-sidenav mode="side">的固定头几乎相同。

sidenav可以使用css规则position: fixed轻松修复

标头有两个问题：

• 主要是当我们打开侧导航时，带有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内容元素。

<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解决方案来解决这个问题，请毫不犹豫地与我们分享。我已经做了一些研究，但唯一可行的解决方案似乎是通过编码。

Answer 2

您应该添加position:fixed到上面的元素，在您的情况下是垫子侧导航和垫子工具栏，或者您可以简单地添加一个CSS类，如下所示：

.fixedElement{
position: fixed;
}

并将其分配给元素垫子侧导航和垫子工具栏

或者您可以简单地将内联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，并将填充顶部添加到正文css，这应该比页眉的高度大一点。例如，如果页眉的高度是40px，那么将padding-top:50px放在body css上，它就可以工作了。