web-dev-qa-db-ja.com

Angular 6-CSS-STICKYヘッダー

私は3つの要素を持っています：1つのツールバー、1つのマップ、他のツールバー。要素は上下に並んでいます

2番目のツールバーはマップ要素の下（上部の400px）に留まりたいのですが、下にスクロールすると、2番目のツールバーが上部の50pxで停止し、最初のツールバーが固定されます。

ご協力いただきありがとうございます

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

あなたの質問に答える前に、あなたはmayを考慮します：

  • HTMLから静的スタイルを削除します。
  • 適切なz-indexを使用して、z-index: 100000000などのz-indexにならないようにします。
  • !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;
}
15
Eliya Cohen

ブラウザのサポートを避けるため、position: sticky、 ngClass を使用して、スティッキー動作を次のように切り替えることで、簡単にこれを実現できます。

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 JSイベントハンドラをAngularで直接使用するべきではないため、スクロール位置を追跡します。

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 Demo

5
Abdul Rafay

他の答えはほとんどすべてのブラウザで利用できないCSSに依存しているため、自分のlib angular-sticky-things をアドバタイズできるようにします。

「境界要素」と呼ばれる機能があり、上記のリンクで動作を確認できます。基本的には、ページをセクションにスライスし（通常は既に持っているもの）、その後、親要素の境界内で要素に粘着性があるように指示します。

ここで実際にそれを見ることができます：

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

Libをインストールし、コードを追加して、divをstickyThingでmat-toolbarに置き換えます。それは基本的にそれです。

npm install @w11k/angular-sticky-things
5
Can

私はあなたのコードのすべてを持っていなかったので、あなたの質問のコードを使用できませんでした。そこで、2番目のツールバーで何をしたいのか、例を示しました。

私のコードは角張っていませんが、同じCSSスタイルと、2番目のツールバーを一番上に修正するクラスを追加/削除するJavascriptイベントハンドラーがあります。要素を独自の要素であるクラス名に置き換えるだけです。

通知

  • まず、この質問をご覧ください CSSスティッキーボタンdivが動作しないIE 11 。

  • ユースケースによっては、要素に動的な位置と高さがあり、element.clientHeight要素を修正する位置を取得します。この場合、JSを使用する必要があります。

あなたが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