position: stickyでスクロールに追従する要素が機能しない

Question

以下のサイト
https://keiyoukai-hanarabi.jp/
こちらで、
スマホサイズになった場合、ヘッダー部分に予約<div>表示しております。

<div class="smapho-show">
        <div class="col-xs-12 tel01 sticky">
            <a href="tel:[phone]">
                <p class="tel02"><span style="font-size: 80%">おおたメディカルモール歯科</span>  <i class="fas fa-phone"></i> ご予約・お問合せ</p>
            </a>
        </div>
    </div>

これをスクロールしたときに、追従させたいのですが、
以下のサイト
https://www.miso.blog/css-position-sticky/

.sticky {
    postion: -webkit-sticky;
    position: sticky;
    top: 0;
}

こちらをCSS、HTMLに追記したのですが反映されません。
私はMac OS10.13.6 Chromeで開発者ツールを出してスマホ画面で確認しています。

何が原因なのかわかりませんので、是非お教えください。

Answer 1

sticky は親要素内で固定されます。
質問の場合、親要素の高さが指定してないので sticky要素と同じになり、
スクロールしても親要素と一緒にするスクロールしてしまいます。

下記のように親要素に高さを設定すると親要素がスクロールしても固定されます。

.sticky {
    postion: -webkit-sticky;
    position: sticky;
    top: 0;
}
.smapho-show {
    height: 1200px;   
}

親要素に関係なく固定したいなら、position: fixed; を指定してください。

stickyに関しては下記の説明が分かり安いと思います。
position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

Comments

[WPJ]

親に高さを入れたのですが、
追従しません。。様々なパターンを駆使し2時間ほどハマっています。。

.smapho-show {
height: 1200px;
}

上記を反映させると
ヘッダーが縦長に伸びすぎまして、
以下に変更していますが、そうすると追従しません、、、

<div class="smapho-show s-high">
<div class="col-xs-12 tel01 sticky">
<a href="tel:[phone]">
<p class="tel02"><span style="font-size: 80%">おおたメディカルモール歯科</span> <i class="fas fa-phone"></i> ご予約・お問合せ</p>
</a>
</div>
</div>

ーーーーー

.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.s-high {
height: 50px;
}

この場合だと、途中まで追従し、下からのバナーが突き上げて上にいく模様です。

[hatena19]

紹介したリンク先は読んで内容を理解しましたか。
ご希望のことは、親要素の領域内で追従(sticky)ではなく、画面に対して固定(fixed)だと思います。

[WPJ]

大変失礼しました。
リンク先は読んで内容を理解し再現できました。
親切にご対応頂きまして誠に感謝しております。
ありがとうございました。