Angular 6-CSS-STICKY标头 [英] Angular 6 - CSS - STICKY Header

问题描述

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

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

我希望第二个工具栏停留在map元素下方(顶部400px)，但是当我向下滚动时，第二个工具栏将停在顶部50px位置，并固定在第一个下方.

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.

感谢您的帮助

//Component.html

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

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

推荐答案

在我回答您的问题之前，您可以考虑:

Before I answer your question, you may consider:

• 从HTML中删除静态样式.
• 使用合理的z-index，因此您最终不会得到z-index: 100000000之类的z-index.
• 仅在没有其他选择时才使用!important.

• 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 !important only when there's no other choice.

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

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

要使位置保持粘性，只需使用position: sticky，并附加top或bottom规则(在本例中为top).例如:

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

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

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

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

在给定的示例中，我做到了:

In my given example, I did:

• 初始化新的Angular 6并添加了Material Angular.
• 在mat-toolbar中添加了[color="primary"]，并通过CSS将其设置为固定.
• 添加了具有自定义高度的#frugelmap只是为了显示它.
• 在mat-toolbar中添加了[color="warn"]并设置了粘性规则(如下所示)
• 添加了#add-spacing大量的lorem ipsum确实显示了粘性效果.

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

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

这篇关于Angular 6-CSS-STICKY标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！