Bootstrapはとっても素晴らしいんですが
たまにかゆいところに手が届かないことがあります。
レスポンシブなのでスマホにも便利なんですがヘッダーやフッターはスクロールせずに表示させたいときってあるじゃないですか。
縦長のサイトでわざわざボタン押すために上までまたスクロールするのも面倒だし。
なのでnavbarをスクロールしても上に表示されるようにCSSを付け足してやります。
まず適当なCSSファイルを作成します。
common.css
.headerArea
{
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1000;
opacity: 0.9;
}
.footerArea
{
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<link href="common.css" rel="stylesheet">
修正前
<div class="navbar navbar-inverse navbar-fixed-top">
修正後
<div class="navbar navbar-inverse navbar-fixed-top headerArea">
<footer class="footerArea">
<p>© Company 2013</p>
</footer>
関連記事