Parallax.toggle(); ・発火と実行を分ける ・条件分岐の数値は変数でとる ・js-parallax is-parallaxのようにターゲット用のクラスをjsで設ける。isで状態を管理する。 ・発火の際にdomの存在確認で条件分岐。(lengthで判断) ・&&を使えば存在確認をしつつ条件分岐できる。
import * as Parallax from '../parallax';
$(window)
.on('scroll resize',function(){
let $width = $(window).width();
let mqSP = 1023;
if($width > mqSP){
Parallax.toggle();
}
});
import $ from 'jquery';
/* ----------------------------
* init
* -------------------------- */
export function toggle(){
var $scrollTop = $(window).scrollTop();
var $height = $('.js-parallax').offset().top;
if( $scrollTop > $height ){
$('.js-parallax').addClass('is-parallax');
}else{
$('.js-parallax').removeClass('is-parallax');
}
}
.is-parallax{
background-attachment: fixed;
}