Angular6-CSS-STICKY标题

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

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

谢谢你的帮助

//Component.html

//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;
}

Eliya Cohen.. 16

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

从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;
}

Abdul Rafay.. 5

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

component.html

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演示

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

从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;
}

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

component.html

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演示

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

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

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

  

  

    I am sticky but only inside #boundary!
  

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

npm install @w11k/angular-sticky-things