html - Angular 4 - 顶部导航栏没有锁定在顶部

Question

我想不出一种方法来锁定顶部导航栏以保持在屏幕顶部。当页面变得太长时，将启用滚动。我试图禁止滚动顶部导航栏并将其固定在屏幕顶部。

相关文件如下:

app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
    <md-sidenav-container class="sidenavContainer">
        <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over">
            <md-toolbar layout="row" color="primary">
                <h2>
                    <span>Side Panel</span>
                </h2>
                <span class="nav-spacer"></span>

                <md-button class="close-icon" (click)=sidenav.close()>
                    <md-icon>close</md-icon>
                </md-button>
            </md-toolbar>
            <nav-menu (onSelected)="setTheme($event)"></nav-menu>
        </md-sidenav>

        <md-toolbar class="top-nav" color="primary">
            <button md-button (click)="sidenav.toggle()">
                <md-icon>menu</md-icon>
            </button>

            <div id="navBarTitle">Dashboard</div>
            <span class="nav-spacer"></span>
            <div>Signed in as: AdminUser</div>
            <md-icon class="nav-icon">
                <div routerLink="/settings" mdTooltip="Settings">settings</div>
            </md-icon>
            <md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
        </md-toolbar>

        <div class="router-container">
            <router-outlet></router-outlet>
        </div>
    </md-sidenav-container>
</div>

应用程序组件.css

.sidenavContainer {
    height: 100%;
    width: 100%;
}

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    background: rgba(0, 0, 0, 0.1);
}

.close-icon {
    cursor: pointer;
    margin-top: 9px;
}

.top-nav {
    position: fixed;
    width: 100%;
    height: 64px;
    top: 0px;
}

.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}

.router-container {
    width: 100%;
    position: relative;
    top: 64px;
}

由于某种原因，位置:固定；似乎不起作用。

Answer 1

所以看起来你只需要使用绝对定位来实现这一点。

应用程序组件.css

.sidenavContainer {
    height: 100%;
}

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    background: rgba(0, 0, 0, 0.1);
}

.close-icon {
    cursor: pointer;
    margin-top: 9px;
}

.top-nav {
    height: 64px;
    position: fixed;
    top: 0px;
}

.router-container {
    width: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0;
    top: 64px;
}

.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}

app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
    <md-sidenav-container class="sidenavContainer">
        <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over">
            <md-toolbar layout="row" color="primary">
                <h2>
                    <span>Side Panel</span>
                </h2>
                <span class="nav-spacer"></span>

                <md-button class="close-icon" (click)=sidenav.close()>
                    <md-icon>close</md-icon>
                </md-button>
            </md-toolbar>
            <nav-menu (onSelected)="setTheme($event)"></nav-menu>
        </md-sidenav>

        <md-toolbar class="top-nav" color="primary">
            <button md-button (click)="sidenav.toggle()">
                <md-icon>menu</md-icon>
            </button>

            <div id="navBarTitle">Dashboard</div>
            <span class="nav-spacer"></span>
            <div>Signed in as: AdminUser</div>
            <md-icon class="nav-icon">
                <div routerLink="/settings" mdTooltip="Settings">settings</div>
            </md-icon>
            <md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
        </md-toolbar>

        <div class="router-container">
            <router-outlet></router-outlet>
        </div>
    </md-sidenav-container>
</div>

这实现了我想要的，让底部栏保持锁定在顶部而不是覆盖在主要内容之上。