position: stickyで追尾するコンテンツを作る方法【IE11対応】

position: stickyめちゃくちゃん便利ですね!
今までJSを使用しないとできいなかった途中でコンテンツが追尾してきて、途中で離れるなどの動きがCSSだけで簡単に実装できるようになりました。
しかし、簡単にできるようになったと言ってもまぁいつもどおりIE11さんが・・・サポートしていないわけです。
IE11のシェアを考えるとまだ対応しないわけにも行かないので、IE11でもposition: stickyと同じ動作ができるように対応します。
 
 

CSSのposition: stickyで追尾するコンテンツを作る

まず普通に「position: sticky」が使えるHTMLとCSSを書きます。
 

<div class="wrap">
<div class="box">
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
<div class="sticky">スクロールコンテンツ</div>
</div>

<div class="box02">コンテンツ2</div>

</div>

 

.wrap {
	width: 1000px;
	margin: 0 auto;
}
.box {
	height: 2000px;
	background-color: #C7C9E0;
	position: relative;
}
.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background-color: #FB9A5B;
}
.box02 {
	height: 2000px;
	background-color: #D0ABAC;
}

 
追尾させたいコンテンツに「position: sticky」を入れます。
「position: -webkit-sticky;」をお忘れなく。
これ入れておかないとiPhoneとかで現状動きません。
 
これでこのようになるかと思います。
 
デモページ

 

このままでは、IE11で追尾しません。
なので今回は「fixedsticky.js」を使用して対応します。
 

「fixedsticky.js」でIE11でもposition: sticky対応させる

「fixedsticky.js」の準備

「fixedsticky.js」はこちらからダウンロード可能です。
使用するファイルは「fixedsticky.css」「fixedsticky.js」の2つ。
 

<head>
<link href="css/fixedsticky.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/fixedsticky.js"></script>
<head>

 

<script>
/* FixedSticky */
$(function() {
$( '.sticky' ).fixedsticky(); //position: stickyを使うID,class名を記述
});
</script>

 
 
以上!
これだけでIE11でも同じ動作ができるようになります。
 
早くIEでも「position: sticky」サポートしてくれないかな・・・。

コメント