Winkel-6 - CSS - KLEBRIG-Header

Ich habe 3 Elemente : 1 toolbar, 1 Karte , eine andere Symbolleiste.
die Elemente sind untereinander

Möchte ich, dass die zweite Symbolleiste Aufenthalt unter der map-element (auf 400px an der Spitze), aber wenn ich nach unten scrollen, meine zweite Symbolleiste wird gestoppt, 50px von oben und wird fix unter den ersten.

Vielen Dank für Ihre Hilfe

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

//Komponente.css

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

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

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

Ich möchte meine Karte zwischen meinen 2 Symbolleisten, und ich möchte nur, wenn ich nach unten scrollen, dass der zweite Symbolleiste wird fix unter den ersten. Wissen Sie das ? vielen Dank für Eure Hilfe

InformationsquelleAutor Newbiiiie | 2018-10-03

15

Bevor ich Ihre Frage beantworten, Sie kann betrachten:
- Entfernen Sie statische Formatierungen aus Ihrer HTML.
- Angemessene z-index, damit Sie nicht am Ende mit z-index, so etwas wie z-index: 100000000.
- Verwenden !important nur, wenn es keine andere Wahl.
Da können wir nicht schreiben, Eckig-code via StackOverflow die snippets, die ich schrieb den code mit Stackblitz - https://stackblitz.com/edit/angular-ii5tnn

Machen, eine position, die klebrig, sowie, verwenden Sie einfach position: sticky mit zusätzlichen top oder bottom Regel (in diesem Fall oben). Zum Beispiel:
```
mat-toolbar {
  position: sticky;
  top: 50px
}
```
Diese Weise mat-toolbar bleibt an seiner position, bis wir es passieren.

In meinem Beispiel habe ich:
- Initialisiert neu Eckig 6 und zusätzliches Material Eckig.
- Hinzugefügt mat-toolbar mit [color="primary"] und setzen Sie es fest über CSS.
- Hinzugefügt #frugelmap mit benutzerdefinierten Höhe, nur um es zu zeigen.
- Hinzugefügt mat-toolbar mit [color="warn"] - und das sticky-Regeln (sehen Sie unten)
- Hinzugefügt #add-spacing mit viel lorem ipsum nur zeigen das sticky-Effekt.
Den folgenden CSS-Regeln:
```
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;
}
```
- vielen Dank für deine Antwort 🙂 aber ich weiß nicht wirklich verstehen, die Lösung. Ich möchte, dass die zweite Symbolleiste Aufenthalt unter der map-element (auf 400px an der Spitze), aber wenn ich nach unten scrollen, meine zweite Symbolleiste wird gestoppt, 50px von oben und wird fix unter den ersten. Sie anderstand meine Frage
- ich bearbeitete es, danke für Eure Hilfe
- Bitte beachten Sie die browser-Unterstützung der position klebrig, caniuse.com/#search=sticky
- Die browser-Unterstützung sieht gut aus. Chrome aktualisiert sich für alle. Aber wenn Sie darauf bestehen, können Sie einfach fügen Sie ein polyfill.
- Ich würde schätzen, ein Grund für downvoting meine Antwort, so kann ich erklären, meine Antwort besser wie möglich.
InformationsquelleAutor Eliya Cohen

Zu vermeiden, die browser-support-Anliegen der position: sticky können Sie leicht erreichen dies, indem Sie ngClass toggle sticky-Verhalten:

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 zu verfolgen, scroll-position, wie Sie, sollten Sie nicht verwenden, JS event-handler direkt in den Winkel:

Komponente.ts

  isSticky: boolean = false;

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

schließlich das hinzufügen von Stil für unsere custom class sticky.

Komponente.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

InformationsquelleAutor Abdul Rafay

5

Da die andere Antwort stützen sich meist auf CSS nicht in allen Browsern verfügbar werde ich mir erlauben, zu werben für mein lib Winkel-sticky-Dinge.

Es hat eine Funktion, die aufgerufen wird, 'boundary Elements' und Sie können ihn in Aktion zu sehen in dem oben genannten link. Was Sie tun, ist im Grunde Sie schneiden Sie Ihre Seite in Abschnitte (was Sie in der Regel schon haben) und dann sagen Sie ein element zu klebrig sein, innerhalb der Grenzen des übergeordneten Elements.

Können Sie hier in Aktion sehen:
```
<div #boundary style="height:1000px;">
  <div #spacer></div>
  <div stickyThing [spacer]="spacer" [boundary]="boundary">
    I am sticky but only inside #boundary!
  </div>
</div>
```
Installieren Sie einfach die lib hinzufügen mein code und ersetzt das div mit der stickyThing mit einer Matte-Symbolleiste. Das ist im Grunde es.
```
npm install @w11k/angular-sticky-things
```
- Ich möchte empfehlen, diese Methode. Danke @Can K.
InformationsquelleAutor Can
2

Ich konnte nicht verwenden Sie den code, der Ihre Frage, weil ich nicht haben, um alle Ihre code. Also schrieb ich Ihnen ein Beispiel von dem, was Sie tun möchten, mit Sie zweiten Symbolleiste.

Mein code ist nicht in eckige, sondern es hat die gleiche css-styling und ein Javascript-event-handler zum hinzufügen/entfernen einer Klasse zu beheben, die zweite Symbolleiste von oben. Ersetzen Sie einfach die Elemente mit Ihren eigenen Elementen Klassennamen.
Bemerken
- Erstens, werfen Sie einen Blick auf diese Frage CSS " Sticky buttons div funktioniert nicht im IE 11.
- In einigen Anwendungsfällen, element möglicherweise über eine dynamische position und Höhe, und Sie haben, um element.clientHeight um die position zu fixieren, Ihr element. In diesem Fall verwenden Sie die JS.
dass Sie können verwenden t

JS:
```
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');
});
```
CSS:
```
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;
}
```
HTML:
```
<div class="container">
  <div class="toolbar-1">First Toolbar</div>
  <div class="map">Map</div>
  <div class="toolbar-2">Second Toolbar</div>
</div>
```
- Schauen Sie bitte auf position: sticky - developer.mozilla.org/en-US/docs/Web/CSS/position. Auf diese Weise, Sie brauchen nicht zu verwenden, JS zu erreichen, die klebrige Wirkung.
- Haben Sie gesehen, die browser-Unterstützung? caniuse.com/#search=sticky Ja, das ist ein neues feature, und es ist so toll und einfach zu bedienen. aber nur ein paar version von chrome unterstützen diese!!!
InformationsquelleAutor Sajad Jafari

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.