Question

我有一个带有绝对位置的透明垫工具栏。滚动页面时，我将过渡到粘性类。哪个可行，但是当应用粘性类时，内容会跳转。

当我向后滚动时，班级更改正常而没有问题。

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content #content cdkScrollable fxLayout="column" fxFlexFill>
    <!-- Add Content Here -->
    <mat-toolbar color="primary" class="fixed" #toolBara>
      <mat-toolbar-row>TesteNav</mat-toolbar-row>
    </mat-toolbar>
    <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/549e9b77-4c90-4c7f-8d0e-772a4ba70576/d6cz757-170fb93c-919b-470a-b156-b836e67fc3fb.jpg/v1/fill/w_1192,h_670,q_70,strp/island_night_by_arsenixc_d6cz757-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzU0OWU5Yjc3LTRjOTAtNGM3Zi04ZDBlLTc3MmE0YmE3MDU3NlwvZDZjejc1Ny0xNzBmYjkzYy05MTliLTQ3MGEtYjE1Ni1iODM2ZTY3ZmMzZmIuanBnIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.Z9WO9X7AblXH_hpq7Lh2bMUcJNvQiK0Vlq6PXSjehbQ"/>
    <p *ngFor="let content of fillerContent">{{content}}</p>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { OverlayContainer, CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
import { MatSidenavContainer, MatToolbar, MatSidenavContent } from '@angular/material';

@Component({
  selector: 'app-my-nav',
  templateUrl: './my-nav.component.html',
  styleUrls: ['./my-nav.component.css']
})
export class MyNavComponent implements AfterViewInit { 

  @ViewChild(MatSidenavContainer, {static: true }) sidenavContainer: MatSidenavContainer;
  @ViewChild(CdkScrollable, {static: true }) scrollable: CdkScrollable;
  @ViewChild(MatSidenavContent, { static: true }) content: MatSidenavContent;
  @ViewChild('toolBara', {static: true }) toolbar: MatToolbar;

  fillerContent = Array(50).fill(0).map(() =>
  `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);

  constructor(public scroll: ScrollDispatcher) {}

  ngAfterViewInit() {
    this.scrollable.elementScrolled().subscribe(() => {
      const scrollTop = this.sidenavContainer.scrollable.getElementRef().nativeElement.scrollTop;
      if (scrollTop > 0) {
        this.toolbar._elementRef.nativeElement.classList.add('sticky');
        this.toolbar._elementRef.nativeElement.classList.remove('fixed');
        console.log('SCroll', "sticky");
      } else {
        this.toolbar._elementRef.nativeElement.classList.add('fixed');
        this.toolbar._elementRef.nativeElement.classList.remove('sticky');
        console.log('SCroll', "fixed");
      }
    });
  }
}

.mat-toolbar.mat-primary {
  -webkit-transition: 700ms ;
  -ms-transition:  700ms ;
  transition: 700ms ;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.fixed {
  position: absolute;
  background-color: transparent !important;
  top: 0;
  z-index: 5;
  margin-top: 0.90%;
  align-content: center;
  color: #fff;
}
.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5;
}
img {
  height: 120px;
}

我想知道我做错了什么，导致滚动时内容跳动。

这里的堆叠闪电战：https://stackblitz.com/edit/angular-stfgjd

Answer 1

我找到了解决方案。只是在这里发布，也许将来会帮助其他人。事情是将工具栏放在路由器插座之后。这样很好地工作。

https://stackblitz.com/edit/angular-stfgjd

*链接的详细信息。

Angular Material Sticky工具栏-滚动时内容在跳跃

1 个答案: