web-dev-qa-db-fra.com

Angular 6 - CSS - STICKY Header

J'ai 3 éléments: 1 barre d'outils, 1 carte, une autre barre d'outils. les éléments sont l'un en dessous de l'autre

Je veux que la deuxième barre d'outils reste sous l'élément de carte (à 400 pixels du haut), mais lorsque je fais défiler l'écran vers le bas, ma deuxième barre d'outils s'arrête à 50 pixels du haut et se fixe sous le premier.

Merci de votre aide

//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;
}
angularcss3scrollsass
5
Newbiiiie

Avant de répondre à votre question, vous pouvez envisager:

  • Supprimez les styles statiques de votre code HTML.
  • Utilisez un index z raisonnable pour ne pas vous retrouver avec un index z de type z-index: 100000000.
  • Utilisez !important uniquement lorsqu'il n'y a pas d'autre choix.

Comme nous ne pouvons pas écrire de code angulaire avec les extraits de StackOverflow, j'ai écrit le code avec Stackblitz - https://stackblitz.com/edit/angular-ii5tnn

Pour rendre une position collante, eh bien, vous utilisez simplement position: sticky, avec une règle supplémentaire top ou bottom (dans ce cas, top). Par exemple:

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

De cette façon, mat-toolbar restera à sa position, jusqu'à ce que nous le passions.

Dans mon exemple, j'ai fait:

  • Initialisé nouvelle angulaire 6 et matériel ajouté angulaire.
  • Ajout de mat-toolbar avec [color="primary"] et le régler sur fixé via CSS.
  • Ajout de #frugelmap avec une hauteur personnalisée juste pour le montrer.
  • Ajout de mat-toolbar avec [color="warn"] et de définir les règles applicables (voir ci-dessous)
  • Le #add-spacing ajouté avec beaucoup de lorem ipsum démontre bien l’effet collant.

Les règles CSS suivantes:

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;
}
7
Eliya Cohen

Pour éviter les problèmes de support du navigateur de position: sticky, vous pouvez facilement y parvenir en utilisant ngClass pour activer/désactiver le comportement collant de la manière suivante:

composant.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 pour suivre la position du défilement car vous ne devez pas utiliser le gestionnaire d'événements JS directement dans Angular:

composant.ts

  isSticky: boolean = false;

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

enfin, en ajoutant du style pour notre classe personnalisée sticky.

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

3
Abdul Rafay

Je ne pouvais pas utiliser le code de votre question car je n'avais pas tout votre code. Alors, je vous ai écrit un exemple de ce que vous voulez faire avec votre deuxième barre d’outils.

Mon code n'est pas angulaire, mais il a le même style css et un gestionnaire d'événements Javascript pour ajouter/supprimer une classe afin de fixer la deuxième barre d'outils en haut. Il suffit de remplacer les éléments par vos propres éléments, noms de classe.

Remarquer

  • Tout d’abord, jetez un oeil à cette question CSS Les boutons Sticky div ne fonctionnent pas dans IE 11 .

  • Dans certains cas d'utilisation, votre élément peut avoir une position et une hauteur dynamiques et vous devez obtenir element.clientHeight pour obtenir la position de fixation de votre élément. Dans ce cas, vous devez utiliser JS.

que vous pouvez utiliser 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>

2
Sajad Jafari

Comme l'autre réponse repose principalement sur des CSS qui ne sont pas disponibles dans tous les navigateurs, je me permettrai de publier mes lib angular-sticky-things .

Il comporte une fonctionnalité appelée «élément de délimitation» et vous pouvez la voir en action dans le lien ci-dessus. En gros, vous coupez votre page en sections (ce que vous avez habituellement déjà), puis vous indiquez qu'un élément doit rester collant dans les limites de l'élément parent.

Ici vous pouvez le voir en action:

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

Installez simplement la bibliothèque, ajoutez mon code et remplacez la div par stickyThing par une barre d'outils mat. C'est fondamentalement ça.

npm install @w11k/angular-sticky-things
2
Can K.