section{ height: 800px; } section.test01,section.test03{ background: #aaa; } section.test02.show::before{ background: url(https://twotone.me/wp-content/uploads/2019/02/KZKHDSC00280-Edit_TP_V4-1.jpg) no-repeat center center /cover; content: ""; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: -1; }
jQuery(function($){ $(window).on('load scroll resize', function() { // 「.select_element」が存在したら発火 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) { target.addClass('show'); }else{ target.removeClass('show'); } } });
background-attachment:fixed;がiphoneのsafariで効かない~after~
2019/02/06