スクロールすると画面分割した右側が動く | 動くWebデザインアイディア帳

エリアの動き
-スクロールすると画面分割した右側が動く-

デモページを見る

See the Pen 6-4 スクロールすると画面分割した右側が動く by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！
※768px以下のウィンドウサイズだと固定されず縦並びに表示されます。左画面固定表示は、横幅768px以上の画面でご確認ください↑

動きを実現する仕組み

CSSの position: sticky;を使用して左画面を固定し、右画面だけスクロールする。
position: sticky;に対応していないブラウザにはstickyfill.jsを読み込んで対応。

[使用するライブラリ]
＊jQuery
＊stickyfill.js（https://github.com/wilddeer/stickyfill）　

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-4.css">
</head>

body内にHTMLを記載します。

<div id="wrapper">
<div id="fixed-area"></div><!--左固定エリア-->
<div id="container"></div><!--右エリア-->
<!--/wrapper--></div>

body 終了タグ直前に jQuery、stickyfill.jsと、動きを制御する自作のJS の3 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
<!--自作のJS-->
<script src="js/6-4.js"></script>
</body>

自作のCSS内の書き方

/*左と右を囲う全体のエリア*/
#wrapper{
	position: relative;/*position stickyの基点にするため relativeをかける*/
	display: flex;/*左エリア、右エリア横並び指定*/
	flex-wrap: wrap;/*ボックスの折り返し可*/
}

/*左エリア*/
#fixed-area{
  /*左固定記述*/
  position: -webkit-sticky;/*Safari用*/
  position: sticky;
  top:0;
	/*横半分50%　縦を100vhにする*/
	width: 50%;
	height: 100vh;
}

/*右エリア*/
#container{
	/*横半分50%にする*/
	width:50%;
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
#wrapper{
	display: block;/*display:flex;を解除*/
}
#fixed-area{
 	position:relative!important;/*position stickyを解除*/
	width:100%;/*横幅を100%にして1列に見せる*/
	height: 40vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
}
#container{
	width:100%;/*横幅を100%にして1列に見せる*/
}
}

自作のJS内の書き方

768px以下では1カラムにするため、position: sticky;に対応していないブラウザ対応用のJavaScriptを、768pxより大きい場合に読み込み、他は取り除く。

$(window).on('load resize', function() {
var windowWidth = window.innerWidth;
var elements = $('#fixed-area');
if (windowWidth >= 768) {
Stickyfill.add(elements);
}else{
Stickyfill.remove(elements);
} 
});