新着記事
2017 031234567891011121314151617181920212223242526272829302017 05
RSS
2015.01.13 10:39|カテゴリ:その他コメント(0)

どなたかHTML詳しい方お助け下さい


ヘッダ下メニューバー2段目をスクロール時に固定表示するようにしたのですが、モニタサイズによってbody外にズレるようですorz
2段目取っ払いました。

当方使用の23インチワイド、フレンドに見てもらった24インチワイド、インチ数未確認のワイドモニタでは正常にbody内に収まってるのですが(IE,Firefox,opera)、スマホPCビューでbody外にズレてたので、もしやと思い17インチ正方形で確認したら同じようにズレてました。

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
var headerMenu = $('.headerMenu');
var headerMenuTop = headerMenu.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= headerMenuTop) {
headerMenu.addClass('headerFixed')
} else if (winTop <= headerMenuTop) {
headerMenu.removeClass('headerFixed')
}
});
});
</script>


<!--▼ 上部固定バー ▼-->
<div class="headerMenu">
<ul id="header_menu_bar">
<li><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></li>
<li><a href="http://livetube.cc/Portgas%20D%20Ace">Livetube</a></li>
<li><a href="https://www.youtube.com/user/hirotttttt/feed">Youtube</a></li>
<li><a href="https://twitter.com/hirotttttt1">Twitter</a></li>
><li><a href="#b">ページ下部へ▽</a></li>
</ul>
</div>
<!--▲ 上部固定バー ▲-->


CSS

/***************************************** ▼上部固定バー▼ */
.headerMenu {
position: center;
top: 0;
left: 0;
width: 1000px;
z-index: 9999;
}
.headerFixed {
position: fixed;
top: 0;
left: 450px;
width: 1000px;
}
/***************************************** ▲上部固定バー▲ */
/* ▼上部固定バー▼ */
ul#header_menu_bar {
font-size: 75%; /* 文字サイズ */
height:30px; /* 高さ */
background-color: transparent; /* 背景色なし設定 */
background-image: url("当ブログアップ済みの黒背景");

padding-left:0px;
margin-left:0px;
margin-top:3px; /* 上の間隔 */
margin-bottom:10px; /* 下の間隔 */
}

#header_menu_bar li {
list-style-type:none;
float:left;
line-height:30px; /* 高さ */
margin:0px;
padding:0px;
}

#header_menu_bar li a {
display:block;
text-align:center;
border:1px solid #ff00ff; /* 枠*/
width:196px; /* 1つのメニューボタンの幅 */
border-right:3px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#; /* メニューボタンの背景 */
text-decoration:none;
}
#header_menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#474747; /* マウスが乗ったときの背景色 */
text-decoration:none;

border-right:;

}
#menu_bar li.menu_bar_end a {
border-right:none;
}
/* ▲上部固定バー▲ */





CSS変更点


/***************************************** ▼上部固定バー▼ */
headerMenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.headerFixed {
position: fixed;
top: 0;
left: 0;
width: 100%
}
/***************************************** ▲上部固定バー▲ */
を、上記の
/***************************************** ▼上部固定バー▼ */
.headerMenu {
position: center;
top: 0;
left: 0;
width: 1000px;
z-index: 9999;
}
.headerFixed {
position: fixed;
top: 0;
left: 450px;
width: 1000px;
}
/***************************************** ▲上部固定バー▲ */
に変更

left: 450px;でワイドモニタでスクロール時もbody内に収まりました、これが原因のような気もするのですが全てのモニタサイズでbody内に収める記述方法があれば教えて頂きたいですm(_ _)m
応援クリックお願いします アクセスランキングブログパーツ

過去記事ランダム忍者ver
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

FC2カウンター
現在の閲覧者数:
FC2アクセスランキング
[ジャンルランキング]
オンラインゲーム
990位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
409位
アクセスランキングを見る>>
逆アクセスランキング
最近の記事+コメント
月別アーカイブ
つぶやき
全ての記事を表示する
QRコード
QR
ブロとも申請フォーム
Powered By FC2ブログ




google検索

カスタム検索
blog内検索

AION公式リンク

AION情報系

アンテナサイト

その他



メールフォーム

名前:
メール:
件名:
本文: