position stickyについて

position stickyを使った場合、スマートフォンは対応してないのでしょうか？
ベンダープレフィックスも書いてるのですが、スマートフォンで反映されないです。
iOSのsafari、chromeで確認しました。

html
1<div id="wrap">
2    <div class="sample2">
3      <div class="mainv-area">
4        <div class="container">
5          <div class="block cover"></div>
6          <div class="block mainv"></div>
7        </div>
8      </div>
9      <div class="contents"></div>
10    </div>
11  </div>

css
1.block{
2  height:100vh;
3}
4
5.mainv{
6  background-image:url(../img/mainv.jpg);
7  background-size:cover;
8  background-repeat: no-repeat;
9  background-position:center center;
10  position:sticky;
11  position:-webkit-sticky; /* safari対応 */
12  bottom:0;
13  right:0;
14  left:0;
15  top:0;
16  z-index:-100;
17}
18.cover{
19  background-image:url(../img/cover.png);
20  background-size:cover;
21  background-repeat: no-repeat;
22  background-position:center center;
23
24}
25.contents{
26  background-color:rgba(0,255,0,0.2);
27  height:300vh;
28}

m.ts10806

2019/01/22 03:31

コードはマークダウンのcode機能を利用してご提示ください

yoshinavi

2019/01/22 04:42

症状が再現するコードを提示されると良いかと思います。

x_x

2019/01/22 05:28

スマートフォンというだけではなく、具体的に何のブラウザでバージョンは何かまで書いてください。

yoshinavi

2019/01/22 05:50

PCでは問題無く動作しているのでしょうか？

ubu

2019/01/22 06:07

ＰＣでは問題ありません

yoshinavi

2019/01/22 06:19

「.mainv」に「z-index:-100;」がありますが、他の要素の下になっていたりはしませんか？

ubu

2019/01/22 06:27

スマートフォンでは重なってすらない状況です。 100vhずつ表示されています。

yoshinavi

2019/01/22 06:30

メディアクエリ等で分けてるかと思いますが、PCとスマホのコードを提示してください。

ubu

2019/01/22 06:33

分けていません。ベンダープレフィックスは記載しています。 cssのmainv内に記載しています。

yoshinavi

2019/01/22 06:55

「.mainv」の下に要素が無いからでは？設定するなら「.block」または「.container」なのでは？どのように動作させたいのか、分かり易くお願いします。

ubu

2019/01/22 07:09

デモサイトがありますので、そちらのURLをお送りいたします。 http://www.bbdosf.com/ ここのmainvになります。

行動規範の内容に同意します

回答3件

ベストアンサー

コメントにも書きましたが、違う親では「position:sticky;」は効きません。

以下はサンプルです。

HTML
1<div> 
2  <div class="block1">同じ親div</div>
3  <div class="block">同じ親sticky</div>
4  <div class="block1">同じ親div</div>
5</div>
6<div>
7  <div class="block1">違う親div</div>
8</div>

CSS
1.block{
2  height:100vh;
3  background-color: lightgrey;
4  position:sticky;
5  top: 0;
6}
7.block1{
8  height:100vh;
9  background-color: lightsteelblue;
10}
11