前提・実現したいこと

縦向きのヘッダー(サイドバー)をフッターまできたら、フッターの上で止めれるようにしたい。
お力を貸していただけると嬉しく思います。

発生している問題・エラーメッセージ

現在だいたい出来ているのですが、画面サイズが変わるとヘッダーの位置も変わってしまう。

該当のソースコード

HTML
1<body>
2    
3    <header id="top-header">
4        <div id="page-wrap" class="header-wrap top">
5        <div class="header-inner">
6          <div class="logo-block">
7            <h1><img src="img/logo.png" width="190" height="28" loading="lazy" alt="会社ロゴ"></h1>
8          </div>
9          <nav class="header-nav-wrap">
10            <ul class="header-nav">
11              <li class="header-nav__item"><a class="nav-item-link">ホーム</a></li>
12              <li class="header-nav__item"><a class="nav-item-link">メニュー</a></li>
13            </ul>
14          </nav>
15            
16        </div><!--header-inner-->
17      </div><!--page-wrap-->
18    </header>
19
20<main>
21~~~~~コンテンツ部分~~~~
22</main>
23
24<footer>
25~~~~~footerコンテンツ部分~~~~
26</footer>
27
28</body>

css
1header {
2  position: fixed;
3  z-index: 10;
4  padding-left: 22px;
5}
6
7header .header-wrap {
8  padding-right: 0px;
9  /*inner*/
10}
11
12

JS
1
2    
3   jQuery(window).on("scroll", function() {
4      documentHeight = jQuery(document).height();
5      scrollPosition = jQuery(this).height() + jQuery(this).scrollTop();
6      footerHeight = jQuery("footer").innerHeight();
7    
8      if (documentHeight - scrollPosition <= footerHeight) {
9        jQuery("header").css({
10          position: "absolute",
11          bottom: footerHeight + 150
12        });
13      } else {
14        jQuery("header").css({
15          position: "fixed",
16          bottom: 140
17        });
18      }
19    });

試したこと

上記コードを試すと、確かにフッター直前で良い感じに止まるのですが、画面サイズを変えた時にヘッダーの位置がずれます。(おそらく、bottomで設定しているから？)
https://haniwaman.com/floting-stop/ (参考サイト)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

resizeイベントも追加すればどうでしょう。（loadイベントもあった方がいいように思います。）

js
1jQuery(window).on("scroll load resize", function() {
2
3//以下略

投稿2021/03/18 06:13

hatena19

総合スコア33715

ベストアンサー

こんにちは。

ご希望に合うかどうかわかりませんが、position: stickyはいかがでしょうか。

ヘッダーをwidth: 0で粘着配置しておいて高さだけ確保し、内容物を絶対配置してヘッダーを包含ブロックとして参照させる、というやり方です。
ヘッダーの高さが内容物依存だと厳しいですが……

とりあえず、↓サンプルを見ていただいた方が話が早いでしょう。

サンプル

css
1header{
2  width: 0;
3  height: 100vh;
4  position: sticky;
5  opacity: 0.5;
6  top: 0;
7}
8header ul{
9  height: 100vh;
10  position: absolute;
11  background: pink;
12}

別の方法を追記

ヘッダにheight: max-contentを当てて、内容物をオーバーフローさせれば、絶対配置を使う必要もなくていい感じですね。

サンプル

css
1header{
2  width: 0;
3  height: max-content;
4  position: sticky;
5  opacity: 0.5;
6  top: 0;
7}
8header ul{
9  width: max-content;
10  background: pink;
11}