私は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;
}
あなたの質問に答える前に、あなたはmayを考慮します:
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
は、合格するまで彼の位置に残ります。
私の与えられた例では、私はやった:
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;
}
ブラウザのサポートを避けるため、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;
}
他の答えはほとんどすべてのブラウザで利用できない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
私はあなたのコードのすべてを持っていなかったので、あなたの質問のコードを使用できませんでした。そこで、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>