Angular 6 - CSS - STICKY标题

Question

我有3个元素:1个工具栏,1个地图,另一个工具栏.元素是一个在另一个之下

我希望第二个工具栏停留在地图元素下(顶部的400px)但是当我向下滚动时,我的第二个工具栏将停在顶部的50px并将在第一个工具栏下修复.

谢谢你的帮助

//Component.html

<mat-toolbar color="primary" [ngStyle]="{'height':'50px'}"  class="fixed-header" >
</mat-toolbar>

<div class="custom-popup" id="frugalmap" ></div>

<mat-toolbar color="warn" class="mat-elevation-z5">
</mat-toolbar>

//Component.css

.fixed-header {
position: fixed;
z-index:999;
}

#frugalmap {
height: 300px;
width: 100%;
margin-top:50px;
}

.mat-elevation-z5 {
position: relative;
z-index: 2;
}

Answer 1

在我回答你的问题之前,你可以考虑:

• 从HTML中删除静态样式.
• 使用合理的z-index,所以你不会得到类似的z-index z-index: 100000000.
• 使用!important只有在没有其他选择.

由于我们无法通过StackOverflow的片段编写Angular代码,因此我使用Stackblitz编写了代码 - https://stackblitz.com/edit/angular-ii5tnn

为了使位置变得粘稠,你只需使用position: sticky附加top或bottom规则(在本例中为top).例如:

mat-toolbar {
  position: sticky;
  top: 50px
}

这样,mat-toolbar将保持在他的位置,直到我们通过它.

在我给出的例子中,我做了:

• 初始化的新Angular 6并添加了Material Angular.
• 新增mat-toolbar带[color="primary"],并设置它通过CSS来固定.
• 添加#frugelmap自定义高度只是为了显示它.
• 新增mat-toolbar与[color="warn"]并设置粘规则(请观看下面)
• 添加#add-spacing了很多lorem ipsum只是展示粘性效果.

以下CSS规则:

mat-toolbar {
  --default-height: 50px;
}

mat-toolbar[color="primary"] {
  top: 0;
  position: fixed;
  height: var(--default-height);
}

mat-toolbar[color="warn"] {
  position: sticky;
  top: var(--default-height);
}

#frugalmap {
  height: 300px;
  background-color: #EEE;
}

Answer 2

为避免对的浏览器支持问题position: sticky，您可以通过使用以下ngClass方式切换粘性行为来轻松实现此目的：

component.html

<mat-toolbar color="primary" class="fixed-header" >
</mat-toolbar>

<div class="custom-popup" id="frugalmap" ></div>

<mat-toolbar
  id="secondToolbar" color="warn"
  [ngClass]="{'mat-elevation-z5' : true, 'sticky' : isSticky}">
</mat-toolbar>

usign HostListener跟踪滚动位置，因为您不应该直接在Angular中使用JS事件处理程序：

component.ts

  isSticky: boolean = false;

  @HostListener('window:scroll', ['$event'])
  checkScroll() {
    this.isSticky = window.pageYOffset >= 250;
  }

最后为我们的自定义类添加样式sticky。

component.css

.fixed-header {
  position: fixed;
  z-index:999;
  height: 50px;
}

#frugalmap {
  height: 300px;
  width: 100%;
  top: 50px;
  position: relative;
}

.mat-elevation-z5 {
  position: relative;
}

.sticky {
  position: fixed;
  top: 50px;
}

Stackblitz演示

Answer 3

由于其他答案主要取决于并非所有浏览器都可用的CSS，因此我将允许自己宣传我的libangle -sticky-things。

它具有一个称为“边界元素”的功能，您可以在上面的链接中看到它的实际作用。基本上，您要做的是将页面切成段（通常已经拥有），然后告诉元素在父元素的边界内发粘。

在这里，您可以看到它的作用：

<div #boundary style="height:1000px;">
  <div #spacer></div>
  <div stickyThing [spacer]="spacer" [boundary]="boundary">
    I am sticky but only inside #boundary!
  </div>
</div>

只需安装lib，添加我的代码，并用stickyThingmat-toolbar 替换div 。基本上就是这样。

npm install @w11k/angular-sticky-things