position: stickyが効かない。追従しない。

Question

サイト
https://sirinova.com/

サイドバーの広告を追従させるためposition: stickyを指定したのですが、動作しません。親、先祖要素にoverflow:hidden;はありません。

    position: -webkit-sticky;
    position: sticky;
    top: 15px;

サイドバーにある.stickyの兄弟要素、例えばすぐ上の#newpostにposition: stickyを指定すると追従します。（と言っても少しスクロールすると解除されてしまう）

解決方法をご教授いただけませんでしょうか？

Answer 1

親要素の <aside id="menu"> の高さをメインカラムと揃えなければならないです。
float で2カラムにしてますがこれをやめて、Flexbox を使い align-items: strech でメインカラムとサイドバーの高さを揃えましょう。それか、めんどくさければ JavaScript で高さ揃えてしまうとか。

Comments

[snof]

ありがとうございます。試行錯誤してみます。

Answer 2

単純に親要素の高さが「.sticky」を設定している所で終わっているからでは？もっと下まで高さが確保されると追従してくると思います。

例えばすぐ上の#newpostにposition: stickyを指定すると追従します。（と言っても少しスクロールすると解除されてしまう）

これも理由は同じです。

参考先：
position - CSS: カスケーディングスタイルシート | MDN - Mozilla
CSS3のposition: stickyを使ってみた

---

-追記-
終わってましたね。スミマセン。
(^^;)

Comments

[snof]

回答ありがとうございます。実際にfloatをやめるのは厳しいので、こうすればstickyが効くよ、という実際の方法を教えていただけると助かります。

[yoshinavi]

floatのままだとJSで高さを確保するかだと思いますが、その状態で「position: sticky」が効くかどうかは検証してみないと･･･
(^^;)

とりあえず、であれば「#menu」の親である「#contents」に
「display: flex;」
「justify-content: space-between;」
の2行を追加すれば、「#main」との高さが揃うので「position: sticky」が効きます。

細部は微調整してみてください。