前提・実現したいこと
サイト内全ページで共通のスタイルを持ったヘッダーを、ページ上部に固定、かつ指定した色の(今回は白)背景で持たせたい
(ちょうどteratailのような動作をするヘッダーを作りたい)
発生している問題・エラーメッセージ
背景色が意図したとおり動作しており、ヘッダーが固定されていない状態で
cssにposition:fixedを記述したところ、背景色が消える、右寄せが適用されない等の問題が発生した
該当のソースコード
main-menu.jsp(実際に読み込むJSPファイル)
jsp
1<html> 2<head> 3<meta charset="UTF-8"> 4<title>ヘッダー表示のテスト</title> 5</head> 6<body style="background-color:lightblue"> 7<div id="header-id"class="header-class"> 8<%@ include file="header_test.jsp"%> 9</div> 10<div align="center"> 11<h1><br>中<br>身<br>の<br>要<br>素</h1> 12</div> 13</body> 14</html>
header_test.jsp(全ページで利用したいヘッダーのJSP)
jsp
1<html> 2<head> 3<meta charset="UTF-8"> 4<link rel="stylesheet" href="./css/header_test.css"> 5</head> 6<body> 7 <header class="site-header"> 8 <p class="right"> 9 ○○ さんでログインしています。 10 <input type="button"value="ログアウト"> 11 <input type="button"value="メニューへ"> 12 <input type="button"value="ヘルプ"> 13 </p> 14 </header> 15</html>
header_test.css(ヘッダーに適用されているcss)
css
1.header-class{ 2 /*position:fixed;*/ 3 background:white; 4} 5#header-id{ 6 background-color:white; 7} 8.right{ 9 float: right; 10 /*position:fixed;*/ 11 right:0; 12 top:15px; 13}
試したこと
・header-classにposition:fixedを持たせた状態、持たせない状態でそれぞれ表示した
→持たせなかった場合(画像1)、一見正常に見えるが、白枠のみ固定されている状態で、スクロールするとボタン類のみ移動する(画像2)
(これ以上スクロールすると枠が見えなくなるため、止めてあります。実際はこのままスクロールし続けると白枠が見えない状態(画像3と同じような状態)になります。
画像1
画像2
→持たせた場合(画像3)、背景色が消え、ボタン類のみが上部に固定されて動きます。
画像3
・右寄せ用クラスのrightにpisition:fixedを持たせた場合(上記画像123)、持たせない場合で検証した
→height,widthを弄れば、「指定した色のヘッダーを上部に固定」の条件は満たせるものの(画像ではheight,widthの数値は適当です)
右寄せが解除されてしまう、さらに中身の要素に被さり、要素が一部見えなくなる(画像4)
画像4
追記
jQuery利用での方法を回答していただき、ローカルファイルの方へ反映、表示を行ったところ、ヘッダーが非表示になってしまっている状態です。(画像5)
画像5
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/08 05:14 編集
2019/07/08 05:26
2019/07/08 05:30
2019/07/08 05:39
2019/07/08 05:45 編集
2019/07/08 05:53
2019/07/08 06:16
2019/07/08 06:39 編集