Q&A
画像つけわすれていませんか？
参考サイトを参考にしてヘッダーの画面上部固定に成功したのですが、画面内のaタグにカーソルを乗せたときに、画像のようにbody枠を超えて右側にヘッダー枠がずれてしまう現象が起きるようになりました。
画像
（jsで指定した78pxより下に行くとずれる。それより上でもaタグをマウスオーバーをすると、ヘッダーはずれませんが右側に同じように隙間が出来ます。）
調べてみると上部固定でアンカータグのズレが起こるなどの記事が多くあったのですが、どれも自分のとは場合が違うようなので解決に困っています・・・それっぽいサイトがそうなのかなと思うのですが、ただこのコードまんまコピペしても動作しなくてつらいのでここで解決方法を聞こうと思いました！教えてください！
追記：画面サイズを小さくするとこの現象がなくなりました
cssファイル２つgitにあげましたのでぜひ見てください ぽりんのgit みれますか？
HTML5
1コード 2<body> 3<jsp:include page="header.jsp" flush="true" /> 4 5<div class="flexslider"> 6<ul class="slides"> 7<li><img src="img/snowShovel.jpg" /></li> 8<li><img src="img/worldTrip.jpg" /></li> 9</ul> 10</div> 11 12<!-- モーダルウィンドウを呼び出すボタン --> 13<section class="sample1"> 14<article> 15<ul> 16 <li> 17<figure class="snip1212"> 18 <img src="img/img01.jpg" alt="sample74" width="400" height="300"> 19 <figcaption> 20 <h2>Jason Response</h2> 21 <p>Just makes people try to do everything at once.</p> 22 </figcaption> 23 <a href="#0" data-toggle="modal" data-target="#myModal"></a> 24</figure> 25 </li> 26</ul> 27</article> 28</section> 29 30<!-- モーダルウィンドウの中身 --> 31<div class="modal fade" id="myModal"> 32 <div class="modal-dialog"> 33 <div class="modal-content"> 34 <div class="modal-right"> 35 <div class="modal-header"> 36 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 37 <h1 class="modal-title">Modal タイトル</h1> 38 </div> 39 <div class="modal-body">Modalああああ</div> 40 <div class="modal-footer"> 41 <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button> 42 </div> 43 </div> 44 <img src="img/img01.jpg"> 45 </div> 46 </div> 47</div> 48</body>
javaScript
1コード 2 $(".hover").mouseleave( 3 function() { 4 $(this).removeClass("hover"); 5 } 6 ); 7 8 9 $(function() { 10 11 //ロード or スクロールされると実行 12 $(window).on('load scroll', function(){ 13 14 //ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加 15 if ($(window).scrollTop() > 78) { 16 $('header').addClass('fixed'); 17 } else { 18 //80px以下だとfixedクラスを削除 19 $('header').removeClass('fixed'); 20 } 21 22 }); 23 24 }); 25
回答3件
0
書かれているコード部分で推測して書くのであれば、box-sizing の指定くらいです。
CSS
1header { 2 overflow: hidden; 3} 4header, 5header ul, 6header li a { 7 box-sizing: border-box; 8}
また、ul にはデフォルトで margin padding が付いているので、書かれているコード以外のどこかで指定されていると思います。
その部分のコードが押し広げている可能性と、header に続く要素（本体エリア）自体の書き方に問題がある可能性もあります。
たとえば、青空の背景が画像なのであれば、下記のように引き伸ばす必要がありますし、背景として指定しているとすればその要素内の要素に右マージンがとられていたりという可能性もあります。
.title > img { width:100%; }
全体のコードがあればもう少し適切にお答えできるかもしれません。
投稿2016/05/17 11:20
総合スコア69400
0
再現してみたのですが、特に不具合が確認できなかったのですが。。。
クラスhoverが見当たらなかったので、.hoverは関係ないですか？
bodyからはみ出しているのでは無くて、クラスtitle の画像が100%で無い為はみ出してみえているとかは考えられないでしょうか？
投稿2016/05/17 11:29
総合スコア118
0
ベストアンサー
width:100%;を指定している要素にpadding:10px 15px;のように左右のpaddingを設定すると親要素よりもpaddingの分大きくなってしまいます。
header li aで指定されているwidth:100%;を取ってみてはどうでしょうか
投稿2016/05/17 11:03
退会済みユーザー
総合スコア0
widthとpadding消してみたのですがダメです
下記の2点確認してみていただけますか
1 ブラウザで見た際に横スクロールバーがでているか
2 現象を確認しているhtmlに質問文以外のコードは入っているか、入っている場合はpolynnさんの環境で質問文にあるコードのみで現象が再現するか一度確認してみてください。
1.出てます
2.質問文にあるコードのみでは現象は起きないです
追記に「画面サイズを小さくするとこの現象がなくなりました 」とあるのですが、これは画面サイズを小さくした場合にはそもそも現象が起きないのか、画面サイズを小さくすることで現象が解消されたのかどちらでしょうか。
gitのcssや追記されたhtmlも確認したのですがやはり手元の環境では再現はできませんでした。
かなり的はずれな推測になりそうですが、そもそもの「aタグにカーソルを乗せたときに」というのが勘違いでflexsliderが動作した際に一瞬幅が広がっている・・・
(これは一旦flexsliderの動作を止めた状態で確認すれば検証できると思います。)
といった感じで一度先入観を捨てて0から考えてみるのもいいかもしれません。
かなり的確なご推測ありがとうございます！スライダーのnext prevにright:-50pxとleft:-50pxがついてたので消してみたら直りました！(☝ ՞ਊ ՞)☝
あなたの回答
tips
プレビュー
