Angular 6 - CSS - STICKY 标题

Angular 6 - CSS - STICKY Header

提问by Newbiiiie

I have 3 elements : 1 toolbar, 1 map , an other toolbar. the elements are one below the other

我有 3 个元素：1 个工具栏、1 个地图、另一个工具栏。元素一个在另一个下面

I want that the second toolbar stay under the map element (at 400px of the top) but when i scroll down, my second toolbar will stop at 50px of the top and will fix under the first.

我希望第二个工具栏位于地图元素下方（顶部的 400 像素），但是当我向下滚动时，我的第二个工具栏将停在顶部的 50 像素处，并将固定在第一个下方。

Thanks for your help

谢谢你的帮助

//Component.html

//组件.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

//组件.css

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

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

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

回答by Eliya Cohen

Before I answer your question, you mayconsider:

在我回答你的问题之前，你可以考虑：

• Remove static styles from your HTML.
• Use reasonable z-index, so you won't end up with z-index of something like z-index: 100000000.
• Use !importantonly when there's no other choice.

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

---

---

Since we can't write Angular code via StackOverflow's snippets, I wrote the code using Stackblitz - https://stackblitz.com/edit/angular-ii5tnn

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

To make a position sticky, well, you simply use position: sticky, with additional topor bottomrule (in this case - top). For example:

要使位置具有粘性，您只需使用position: sticky, 和附加top或bottom规则（在本例中为 - 顶部）。例如：

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

This way, mat-toolbarwill remain at his position, until we pass it.

这样，mat-toolbar就会留在他的位置上，直到我们通过它。

In my given example, I did:

在我给出的例子中，我做了：

• Initialized new Angular 6 and added Material Angular.
• Added mat-toolbarwith [color="primary"]and set it to fixed via CSS.
• Added #frugelmapwith custom height just to show it.
• Added mat-toolbarwith [color="warn"]and set the sticky rules (watch below)
• Added #add-spacingwith lots of lorem ipsum just do demonstrate the sticky effect.

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

The following CSS rules:

以下 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;
}

回答by Abdul Rafay

To avoid the browser support concerns of position: sticky, you can easily achieve this by using ngClassto toggle sticky behaviour as:

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

component.html

组件.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 HostListenerto track scroll position as you should not use JS event handler directly in Angular:

usignHostListener跟踪滚动的位置，你不应该在角直接使用JS事件处理程序：

component.ts

组件.ts

  isSticky: boolean = false;

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

finally adding style for our custom class sticky.

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

component.css

组件.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 Demo

Stackblitz 演示

回答by Can

Since the other answer mostly rely on CSS that is not available in all browsers I'll allow myself to advertise my lib angular-sticky-things.

由于另一个答案主要依赖于并非在所有浏览器中都可用的 CSS，因此我将允许自己宣传我的 lib angular-sticky-things。

It has a feature that is called 'boundary element' and you can see it in action in the above link. What you do is basically you slice your page in sections (what you usually already have) and then you tell an element to be sticky within the boundaries of the parent element.

它有一个称为“边界元素”的功能，您可以在上面的链接中看到它的运行情况。您所做的基本上是将您的页面分成几部分（您通常已经拥有的部分），然后您告诉一个元素在父元素的边界内保持粘性。

Here you can see it in action:

在这里你可以看到它的实际效果：

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

Just install the lib, add my code and replace the div with stickyThingwith a mat-toolbar. That's basically it.

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

npm install @w11k/angular-sticky-things

回答by Spleen

I couldn't use the code of your question because I didn't have all of your code. So, I wrote you an example of what you want to do with you second toolbar.

我无法使用您问题的代码，因为我没有您的所有代码。所以，我给你写了一个你想用第二个工具栏做什么的例子。

My code is not in angular, but it has the same css styling and a Javascript event handler to add/remove a class to fix the second toolbar to the top. Just replace the elements with your own elements, classnames.

我的代码不是有角度的，但它具有相同的 css 样式和一个 Javascript 事件处理程序来添加/删除一个类以将第二个工具栏固定到顶部。只需用您自己的元素、类名替换元素。

Notice

• First of all, Take a look at this quesion CSS Sticky buttons div not working in IE 11.

• In some use cases, your element might have a dynamic position and height and you have to get element.clientHeightto get the position of fixing your element. In this case, you have to use JS.

注意

• 首先，看看这个问题CSS Sticky buttons div not working in IE 11。

• 在某些用例中，您的元素可能具有动态位置和高度，您必须获得element.clientHeight固定元素的位置。在这种情况下，您必须使用 JS。

that you can use t

你可以使用 t

document.addEventListener("scroll", function(){
    var secondToolbar = document.querySelector('.toolbar-2');
    var map = document.querySelector('.map');

    if ((window.pageYOffset + 50) > (map.offsetTop + map.clientHeight))
      secondToolbar.classList.add('fixed');
    else
      secondToolbar.classList.remove('fixed');
});

body {
  margin: 0;
}

*{
  box-sizing: border-box;
}

.container {
  width: 300px;
  height: 1000px;
  padding-top: 50px;
}

.toolbar-1,
.toolbar-2,
.map {
  display: block;
  width: 300px;
  color: #aaa;
  text-align: center;
  padding: 15px;
  border: 1px solid #242424;
}

.toolbar-1 {
  position: fixed;
  height: 50px;
  top: 0;
  left: 0;
  background-color: #f8f8f8;
}

.toolbar-2 {
  height: 50px;
}

.toolbar-2.fixed{
  position: fixed;
  top: 50px;
  left: 0;
}

.map {
  height: 250px;
  background-color: #f8f8f8;
}

<div class="container">
  <div class="toolbar-1">First Toolbar</div>
  <div class="map">Map</div>
  <div class="toolbar-2">Second Toolbar</div>
</div>