CSSのみでサイドバーを追従させたいのですが

調べて色々いじってみたのですがわからないので質問させてください。

こちらのtp_113というテンプレートを使って、サイドバーを追従する形（position: styicky）にしたいのですがうまくいきません。

自分で追加したコードはhtmlの<div id="sub">部分に

html
1<div id="sub">
2
3<nav class="box1">
4<h2>Contents</h2>
5<ul class="submenu">
6<li><a href="company.html">会社概要</a></li>
7<li><a href="link.html">リンク</a></li>
8<li><a href="contact.html">お問い合わせ</a></li>
9<li><a href="#">メニューサンプル</a></li>
10<li><a href="#">メニューサンプル</a></li>
11</ul>
12</nav>
13
14<div class=“sticky”>
15〜追従する要素〜
16</div>
17
18</div>
19<!--/#sub-->
20

っという感じで追加（他のサブメニューは必要なかったので削除しました）

CSSは**/*subコンテンツ**の一番下に

CSS
1.sticky {
2  position: -webkit-sticky;
3  position: sticky;
4  top: 10px;
5}

を追加しました。

overflow:hiddenが複数あるので、それが原因だと思うのですが、そこからがわからなくて困ってます。
そもそもこのテンプレートを使って追従形にするのは、初心者には無理があるのでしょうか？

ご教示のほどよろしくお願い致します

hwatarig

2020/02/26 15:45

うまくいっていないもので構いませんので、ご自身で書かれたソースコードを質問文に追加してください。

hwatarig

2020/02/27 00:39

テンプレートのどこにdiv.stickyを追加したのかを質問文に記載してください。

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

回答1件

ベストアンサー

overflow:hiddenが複数あるので、それが原因だと思うのですが、

お察しの通り、stickyは先祖要素にoverflow:hidden;がかかっていると動作しませんので、<div class=“sticky”>の全ての先祖要素からoverflow:hidden;を取り除いてください。

次に、<div class="sticky">を入れている<div id="sub">ですが、position:sticky;は直接の親要素のエリアでしか追従しない仕様なので、このままでは高さが足りません。ためしに<div id="sub">にheight:1000px;など適当な高さを指定してみると、そのエリア内で追従することを確認できると思います。

おそらく、ページを一番下までスクロールしてもずっとついてくるようにしたいとお考えかと思いますので、<div class="sticky">を<div id="sub">の子要素から取り出して、<div id="contents" class="inner">の直下に移動するのが良いと思います。ただし、floatしている要素にposition:sticky;を当てるばあい、floatがclearfixされている必要がありますので、<div id="contents" class="inner">にclearfixのスタイルを当ててください。

参考
position: sticky;の仕組みや実際の使い方をやさしく解説

投稿2020/02/27 09:42

hwatarig

総合スコア461