JS

HTMLの書き方

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

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

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>

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);
	} 
});