position stickyがIE11で使えないので

html5でメニューなどスクロールを途中で固定表示させるために
jQueryではなくposition:sticky;を使うと簡単に実現できる。
ただし、position sticky はまだIE11など一部のブラウザでは使えない。

参考
Can I use position: sticky ?

Fixed Stickyスクリプトを使用すれば解決する。
Fixed Sticky- GitHub

使い方
position:stickyの場合

<body>
<nav class="sticky-menu">
    <ul><li>メニュー１</li><li>メニュー２</li><li>メニュー３</li></ul>
</nav>


</body>
.sticky-menu {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
}

FixedStickyの場合

<head>
<script src="js/fixedsticky.js"></script>
<link href="css/fixedsticky.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav id="scrollfix">
    <ul><li>メニュー１</li><li>メニュー２</li><li>メニュー３</li></ul>
</nav>

<body>
.fixedsticky { top: 0; }
.fixedsticky-on {
    width: 100%; /* 任意で中央位置を指定 */
}
/* FixedSticky */
$(function() {
	$( '#scrollfix' ).fixedsticky();
});

まだIE11を使用しているユーザーがいるので当面はこれを使用することになるでしょう。

投稿日

カテゴリー:

投稿者:

Usui1107

タグ:

コメント

コメントを残す