【css】「background-attachment:fixed;」がiphoneのsafariで効かない

使用するHTMLコード

使用するHTMLコード

<section class="test01"></section>
<section class="test02"></section>
<section class="test03"></section>

PCは「background-attachment: fixed;」で問題ない

スマホ抜きであれば以下のコードでパララックスっぽくできる

section.test02::before{
	background: url(画像URL) no-repeat center center /cover;
	background-attachment: fixed;
}

疑似クラスを使う

スマホでもパララックスさせたいなら疑似クラスを使い背景に設定する

section.test02::before{
	background: url(画像URL) no-repeat center center /cover;
	content: "";
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}

jqueryで指定した要素が範囲内に入った時のみ表示

<script>
jQuery(function($){
	$(window).on('load scroll resize', function() {
		//　「section.test02」が存在したら発火
		if($('section.test02').length){
		    add_class_in_scrolling($('section.test02'));
		}
	});
	// スクロールで要素が表示されている時にclassを付与する
	function add_class_in_scrolling(target) {
	    //　指定した要素の次の要素
	    var nextElement = $('section.test03');
	    var winScroll = $(window).scrollTop();
	    var winHeight = $(window).height();
	    //　ウィンドウの最下部の位置取得
	    var scrollPos = winScroll + winHeight;
	    //　指定した要素が画面内に入ったらclass付与して出たら削除
	    if(target.offset().top - 100 < scrollPos && nextElement.offset().top + winHeight + 100 > scrollPos) {
	        target.addClass('show');
	    }else{
	        target.removeClass('show');
	    }
	}
});
</script>

スクロールが早かったりすると画像がパッと出てきたりパッと消えたりするから、数値「100」を指定してclassがつく位置に少し余裕を持たせてる

↓参考、以前書いた備忘録