Q&A
実行してみましたが、いまいち問題点がつかめません。。
グローバルナビが固定されるときに縮小されるので、その分Section1との間が広くなるのが問題でしょうか？（固定前はmargin-topの16、固定後はpadding-bottomの分+8）
問題点についてわかれば、力になれるかもしれません。
#1.実現したいこと
スクロールすることでグローバルナビエリアがウィンドウ上部に固定され、ヘッダー高さが縮小される
#2.現状の問題
グローバルナビを固定したいタイミングでclassをつけることで上記を実現しています。
グローバルナビが固定されたタイミングでコンテンツにグローバルナビの高さ分余白をつけることでスクロールのスピードが早い場合は違和感なく表示されるようにしています。
現状の問題点として、グローバルナビが固定された位置からわずかにスクロールされた場合、グローバルナビの高さが取得できず（console.logにて出力し確認すると縮小前の高さしか取得できていませんでした）、余白ができてしまう状態です。上記の問題を解決したく質問させていただきました。
#3.コード
HTML
1<body> 2 <div class="wrapper"> 3 <header id="header" class=""> 4 <div class="header-nofixed"> 5 <p>非固定エリア</p> 6 </div> 7 <div class="header-fixed"> 8 <nav class="header-nav"> 9 <ul class="header-nav-links clearfix"> 10 <li><a href="#section1">section1</a></li> 11 <li><a href="#section2">section2</a></li> 12 <li><a href="#section3">section3</a></li> 13 <li><a href="#section4">section4</a></li> 14 </ul> 15 </nav> 16 </div> 17 </header> 18 <div class="main"> 19 <section class="section-wrap" id="section1"> 20 <div class="contents-outer"> 21 <p>---section1---</p> 22 </div> 23 </section> 24 <section class="section-wrap section-sec" id="section2"> 25 <div class="contents-outer"> 26 <p>---section2---</p> 27 </div> 28 </section> 29 <section class="section-wrap" id="section3"> 30 <div class="contents-outer"> 31 <p>---section3---</p> 32 </div> 33 </section> 34 <section class="section-wrap section-sec" id="section4"> 35 <div class="contents-outer"> 36 <p>---section4---</p> 37 </div> 38 </section> 39 </div> 40 <footer id="footer"> 41 <div class="footer-inner"> 42 <p>© xxx.All Rights Reserved.</p> 43 </div> 44 </footer> 45 </div> 46</body>
css
1@charset "UTF-8"; 2.contents-outer { 3 min-width: 1280px; 4 padding: 0 40px; 5 margin: 0 auto; 6} 7/* ---- common ---- */ 8img { 9 width: 100%; 10 height: auto; 11} 12 13/* ---- header ---- */ 14#header .header-nofixed { 15 padding: 5em 0; 16 background-color: #ffffff; 17 text-align: center; 18} 19 20#header .header-fixed { 21 padding: 1.5em 2em; 22 background-color: #dddddd; 23 transition: 0.5s all ease; 24} 25 26#header .header-nav { 27 display: flex; 28 align-items: center; 29 justify-content: center; 30} 31 32#header .header-nav ul li { 33 float: left; 34 padding: 0 2em; 35} 36 37/* ナビゲーションfixedスタイル */ 38#header .header-fixed.fixed { 39 width: 100%; 40 min-width: 1280px; 41 position: fixed; 42 top: 0; 43 left: 0; 44 opacity: 0.7; 45 padding: 0.5em 0.5em; 46} 47 48/* ---- footer ---- */ 49#footer { 50 position: relative; 51} 52 53#footer .footer-inner { 54 width: 100%; 55 padding: 1em 2em; 56 background-color: #dddddd; 57 text-align: center; 58} 59 60/* ---- contents ---- */ 61.section-wrap { 62 background-color: skyblue; 63 text-align: center; 64 height: 700px; 65} 66 67.section-wrap.section-sec { 68 background-color: #ffffff; 69} 70
JavaScript
1$(function() { 2 var $win = $(window); 3 var $doc = $(document); 4 var $header = $('#header'); 5 var $header_nofixed = $header.find('.header-nofixed'); 6 var $header_fixed = $header.find('.header-fixed'); 7 var $main = $('.main'); 8 9 // スクロール量 10 var win_sc = $win.scrollTop(); 11 12 // 非固定エリア高さ 13 var header_nofixed_height = $header_nofixed.outerHeight(); 14 15 // グローバルナビ高さ 16 var nav_height = $header_fixed.outerHeight(); 17 18 function navFixed() { 19 win_sc = $win.scrollTop(); 20 21 if (win_sc > header_nofixed_height) { 22 $header_fixed.addClass('fixed'); 23 $header_fixed.css("left",-$win.scrollLeft()); 24 25 nav_height = $header_fixed.outerHeight(); 26 $main.css('padding-top',nav_height + 'px'); 27 } else { 28 $header_fixed.removeClass('fixed'); 29 $main.css('padding-top','0'); 30 } 31 }; 32 33 $win.scroll(function() { 34 navFixed(); 35 showTopBtn(); 36 }); 37 38 $win.resize(function(){ 39 header_nofixed_height = $header_nofixed.outerHeight(); 40 nav_height = $header_fixed.outerHeight(); 41 navFixed(header_nofixed_height,nav_height); 42 }); 43 44 45}); 46
返信ありがとうございます。
グローナビが固定された際に高さが縮小されるため、その高さ分をclass="main"の領域（Sectionの上部）のpadding-topを同じ値に変更することで対応しました。
問題点としてはゆっくりスクロールした際に偶然固定位置から1px程度スクロールした位置で画面スクロールがとまった場合に添付画像のようにpaddingの変更値が縮小高さに合わず白の空白が見えてしまう点です。
説明不足であれば申し訳ありませんが、よろしくお願いいたします。
先のコメントの方と同じく、問題点が分かりません。
paddingの変更値が縮小高さに合わなかった際の数値と、想定していた数値もおしえてください。
あと、見えてしまう余白とはどこの事でしょうか？
回答1件
0
ヘッダの高さが取れない、ということだけ考えると、
ヘッダの高さが変わる前にpadding-topの計算が走っちゃってるのが原因かもですね。
ちょっと力技ですが、
navFixed()内で.mainのpadding-topを更新してるところ
Javascript
1nav_height = $header_fixed.outerHeight(); 2$main.css('padding-top',nav_height + 'px');
の部分をsetTimeoutとかで一瞬遅延して処理すれば動くかなと思います。
が、そもそもこういった場合にヘッダの高さに合わせてpadding-topとかをいじってしまうと、
ヘッダの拡縮がコンテンツ全体のY位置に影響してしまうのであまりよろしくないかなと。
最初からヘッダは
position:fixedもしくはabsolute
で置いて、.mainにも必要なら最初からpadding-topをある程度設けておき、
ヘッダ固定（というかこの場合は「縮小」?）時には、ヘッダの高さだけ変える（今回であれば上下paddingを変更する）だけにすれば、
ヘッダ以外の部分のY位置に影響せず、ヘッダのみの拡縮で済むので、padding-topとかを複雑に考えなくても良いのかなと思いますがいかがでしょうか？
※答えが見当違いだったら申し訳有りません・・・
投稿2020/08/20 12:08
編集2020/08/20 12:10
総合スコア31
あなたの回答
tips
プレビュー
