シングルページで、ナビゲーションが画面の最上部にきたら固定し、ページ内リンクにてコンテンツを上下スクロールで表示したいのですが、
ズレがどうしても解消できずに悩んでいます。
下記を参照しましたが、解決できませんでした。
https://teratail.com/questions/80305
https://www.yumemono.net/anchor-link-shifted/
解決法をご教示いただけますと幸いです。
発生している問題
1)一番上のコンテンツ(section01)へのリンクをクリックすると、headerのclass(fixed)がつかない・ついていた場合は外れてしまう。
2)section01のリンクを押した後、他のリンクをクリックすると、headerにfixedは付与されるがナビの下にコンテンツが入り込んでずれる。
3)ナビが固定される前に、section01以外のリンクをクリックすると、ナビの下に入り込んでずれてしまう。
(2・3ともに、その状態で再度section01以外のリンクをクリックすると直る)
4)section02やsection03の位置から section01のリンクをクリックすると、ナビの上に隙間が空く。
該当のソースコード
js
1$(window).on('scroll', function() { 2 if ($(this).scrollTop() > 800) { 3 $('#header').addClass('fixed'); 4 } else { 5 $('#header').removeClass('fixed'); 6 } 7 }); 8 9$(document).ready(function() { 10 $('a[href^="#"]:not([href$="#"])').click(function() { 11 var href = $(this).attr('href'); 12 var pos = $(href).offset().top - 100; 13 var duration = 600; 14 $('body, html').animate({ scrollTop: pos }, duration, 'linear'); 15 return false; 16 }); 17 }); 18
html
1<div id="mainVisual"> 2</div> 3 4<header id="header"> 5<nav class="inrHeader"> 6<h2 id="logo"><a href="#wrapper"><img src="*****" alt=""></a></h2> 7<ul id="navGlobal" class="clearfix"> 8<li><a href="#section01">SECTION01</a></li> 9<li><a href="#section02">SECTION02</a></li> 10<li><a href="#section03">SECTION03</a></li> 11<li><a href="#section04">SECTION04</a></li> 12</ul> 13</nav> 14</header> 15 16<div id="container"> 17 <div id="section01" class="box"> 18 SECTION 01 19 </div> 20 <div id="section02" class="box"> 21 SECTION 02 22 </div> 23 <div id="section03" class="box"> 24 SECTIO 03 25 </div> 26 <div id="section04" class="box"> 27 SECTION04 28 </div> 29</div> 30
css
1#mainVisual { 2height: 800px; 3width: 100%; 4position: relative; 5background: #eee; 6} 7#header { 8width: 100%; 9background: #ffc000; 10} 11.fixed { 12position: fixed; 13top: 0; 14left: 0; 15z-index: 10000; 16} 17.inrHeader { 18height: 100px; 19width: 1080px; 20margin: 0 auto; 21overflow: hidden; 22} 23#logo { 24float: left; 25padding-top: 16px; 26} 27#navGlobal { 28float: right; 29margin: 0; 30} 31#navGlobal li { 32float: left; 33} 34 35#navGlobal li a { 36display: block; 37height: 100px; 38padding: 0 20px; 39line-height: 100px; 40color: #fff; 41} 42.box { 43height: 600px; 44} 45
試したこと
fixedがつくタイミングの問題かと思い、jsの書き方をいろいろ試してみたのですが、解決できませんでした。
また、CSSでズレを解消しようと、下記のようにCSSを書いてみましたが解決できず。
css
1.box { 2margin-top: -100px; 3paddint-top: 100px; 4}
的を射ない、わかりくい表現になってしまってすみません。
とにかく、どんな状況下でリンクをクリックしてもコンテンツがずれてしまうのを回避したいです。
いろいろと頑張ってみたのですが、お手上げです・・・。
解決法をご教示いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/26 08:11