質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

追従ヘッダー:スクロールに応じてヘッダーの高さが変化する処理について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 1,749
退会済みユーザー

退会済みユーザー

1.実現したいこと

スクロールすることでグローバルナビエリアがウィンドウ上部に固定され、ヘッダー高さが縮小される

2.現状の問題

グローバルナビを固定したいタイミングでclassをつけることで上記を実現しています。
グローバルナビが固定されたタイミングでコンテンツにグローバルナビの高さ分余白をつけることでスクロールのスピードが早い場合は違和感なく表示されるようにしています。
現状の問題点として、グローバルナビが固定された位置からわずかにスクロールされた場合、グローバルナビの高さが取得できず(console.logにて出力し確認すると縮小前の高さしか取得できていませんでした)、余白ができてしまう状態です。上記の問題を解決したく質問させていただきました。
イメージ説明

3.コード

<body>
    <div class="wrapper">
        <header id="header" class="">
            <div class="header-nofixed">
                <p>非固定エリア</p>
            </div>
            <div class="header-fixed">
                <nav class="header-nav">
                    <ul class="header-nav-links clearfix">
                        <li><a href="#section1">section1</a></li>
                        <li><a href="#section2">section2</a></li>
                        <li><a href="#section3">section3</a></li>
                        <li><a href="#section4">section4</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="main">
            <section class="section-wrap" id="section1">
                <div class="contents-outer">
                    <p>---section1---</p>
                </div>
            </section>
            <section class="section-wrap section-sec" id="section2">
                <div class="contents-outer">
                    <p>---section2---</p>
                </div>
            </section>
            <section class="section-wrap" id="section3">
                <div class="contents-outer">
                    <p>---section3---</p>
                </div>
            </section>
            <section class="section-wrap section-sec" id="section4">
                <div class="contents-outer">
                    <p>---section4---</p>
                </div>
            </section>
        </div>
        <footer  id="footer">
            <div class="footer-inner">
                <p>&copy; xxx.All Rights Reserved.</p>
            </div>
        </footer>
    </div>
</body>
@charset "UTF-8";
.contents-outer {
    min-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
}
/* ---- common ---- */
img {
    width: 100%;
    height: auto;
}

/* ---- header ---- */
#header .header-nofixed {
    padding: 5em 0;
    background-color: #ffffff;
    text-align: center;
}

#header .header-fixed {
    padding: 1.5em 2em;
    background-color: #dddddd;
    transition: 0.5s all ease;
}

#header .header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .header-nav ul li {
    float: left;
    padding: 0 2em;
}

/* ナビゲーションfixedスタイル */
#header .header-fixed.fixed {
    width: 100%;
    min-width: 1280px;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    padding: 0.5em 0.5em;
}

/* ---- footer ---- */
#footer {
    position: relative;
}

#footer .footer-inner {
    width: 100%;
    padding: 1em 2em;
    background-color: #dddddd;
    text-align: center;
}

/* ---- contents ---- */
.section-wrap {
    background-color: skyblue;
    text-align: center;
    height: 700px;
}

.section-wrap.section-sec {
    background-color: #ffffff;
}
$(function() {
    var $win = $(window);
    var $doc = $(document);
    var $header = $('#header');
    var $header_nofixed = $header.find('.header-nofixed');
    var $header_fixed = $header.find('.header-fixed');
    var $main = $('.main');

    // スクロール量
    var win_sc = $win.scrollTop();

    // 非固定エリア高さ
    var header_nofixed_height = $header_nofixed.outerHeight();

    // グローバルナビ高さ
    var nav_height = $header_fixed.outerHeight();

    function navFixed() {
        win_sc = $win.scrollTop();

        if (win_sc > header_nofixed_height) {
            $header_fixed.addClass('fixed');
            $header_fixed.css("left",-$win.scrollLeft());

            nav_height = $header_fixed.outerHeight();
            $main.css('padding-top',nav_height + 'px');
        } else {
            $header_fixed.removeClass('fixed');
            $main.css('padding-top','0');
        }
    };

    $win.scroll(function() {
        navFixed();
        showTopBtn();
    });

    $win.resize(function(){
        header_nofixed_height = $header_nofixed.outerHeight();
        nav_height = $header_fixed.outerHeight();
        navFixed(header_nofixed_height,nav_height);
    });


});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • rina

    2020/08/12 09:43

    実行してみましたが、いまいち問題点がつかめません。。
    グローバルナビが固定されるときに縮小されるので、その分Section1との間が広くなるのが問題でしょうか?(固定前はmargin-topの16、固定後はpadding-bottomの分+8)
    問題点についてわかれば、力になれるかもしれません。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/08/15 01:44

    返信ありがとうございます。
    グローナビが固定された際に高さが縮小されるため、その高さ分をclass="main"の領域(Sectionの上部)のpadding-topを同じ値に変更することで対応しました。
    問題点としてはゆっくりスクロールした際に偶然固定位置から1px程度スクロールした位置で画面スクロールがとまった場合に添付画像のようにpaddingの変更値が縮小高さに合わず白の空白が見えてしまう点です。
    説明不足であれば申し訳ありませんが、よろしくお願いいたします。

    キャンセル

  • akihiro3

    2020/08/17 16:24

    先のコメントの方と同じく、問題点が分かりません。

    paddingの変更値が縮小高さに合わなかった際の数値と、想定していた数値もおしえてください。
    あと、見えてしまう余白とはどこの事でしょうか?

    キャンセル

回答 1

+2

ヘッダの高さが取れない、ということだけ考えると、
ヘッダの高さが変わる前にpadding-topの計算が走っちゃってるのが原因かもですね。

ちょっと力技ですが、
navFixed()内で.mainのpadding-topを更新してるところ

nav_height = $header_fixed.outerHeight();
$main.css('padding-top',nav_height + 'px');


の部分をsetTimeoutとかで一瞬遅延して処理すれば動くかなと思います。

が、そもそもこういった場合にヘッダの高さに合わせてpadding-topとかをいじってしまうと、
ヘッダの拡縮がコンテンツ全体のY位置に影響してしまうのであまりよろしくないかなと。

最初からヘッダは
position:fixedもしくはabsolute
で置いて、.mainにも必要なら最初からpadding-topをある程度設けておき、
ヘッダ固定(というかこの場合は「縮小」?)時には、ヘッダの高さだけ変える(今回であれば上下paddingを変更する)だけにすれば、
ヘッダ以外の部分のY位置に影響せず、ヘッダのみの拡縮で済むので、padding-topとかを複雑に考えなくても良いのかなと思いますがいかがでしょうか?

※答えが見当違いだったら申し訳有りません・・・

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る