スクロール途中から固定・解除する方法【CSSのみ】
記事内に商品プロモーションを含む場合があります
目次
CSSのみでスクロール固定・解除する
新しく追加された「position: sticky」を紹介します。
今までjQueryを使用しないとできなかったコンテンツを固定させ、途中で固定を解除させる処理をCSSだけで可能にするプロパティです。
脱jQueryと言われている今持ってこいのCSSですね！
ただ現状IEやedgeで対応していないのが問題ですが…。
edgeに関しいて今後対応してくれることを願ってます(^o^)
では早速実装してみよう！
「position: sticky」で固定コンテンツを作る
<div class="wrap"> <div class="box"> コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ <div class="sticky">スクロールコンテンツ</div> </div> <div class="box02">コンテンツ２</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;
}
こんな感じ！
対象の要素の位置まで来たときにflexになっています。
必要なCSSを抜粋するとこの部分
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 位置指定 */
}
まだまだ対応ブラウザの部分で問題は残っていますが今後期待ですね┌(_Д_┌ )┐
(2019年6月9日追記)
IEやedgeで対応していないと書いていますが、edgeは対応しました。
ただIE11ではまだ未対応のため、IE11でも動くように対策方法を追記します。
IE11でも動作するようにする方法
今回は「fixedsticky.js」を使用し、IE11でも動作するようにします。
「fixedsticky.js」のダウンロードはこちら
使用するファイルは「fixedsticky.css」「fixedsticky.js」の２ファイルです。
では早速実装していきます。
「fixedsticky.js」でIE11対策
まずheade内の記載。
先程の「fixedsticky.css」「fixedsticky.js」を読み込みます。
<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>
続いて、どのIDもしくはclassに使用するのか指定のためにbody終わりの直前に下記を入力します。
<script>
/* FixedSticky */
$(function() {
$( '.sticky' ).fixedsticky(); //position: stickyを使うID,class名を記述
});
</script>
完了！
IE11でも同じ動作を行うはずです！
IEは別の対策もしないといけないことも多く早くサポート終わらないかな・・・。
ABOUT ME
