上部にレクタングルのメニューを固定したい、そう思って調べてみました。

スマートフォン向けのサイトを作成していて、上部にメニューを固定させておきたいのですが、検索するとjqueryで〜と書いてあったのですが、別に固定させるだけであればcssで実装できたので、メモがてら記録しておきます。

header要素でトップを作って固定する

<header>
<div id="inner">ああああ</div>
</header>

そして、css側では以下のように記載します

header{
height:42px;
}

header>div#inner{
width:100%;
height:42px;
position:fixed;
top:0;
left:0;
z-index:100;
background-color:red;
}

ひとまずこれで上部は固定されました。サイズとか、divの中は適宜変更で。

コメント