may88seiji
6/9/2017 - 8:48 AM

Parallax.toggle(); ・発火と実行を分ける ・条件分岐の数値は変数でとる ・js-parallax is-parallaxのようにターゲット用のクラスをjsで設ける。isで状態を管理する。 ・発火の際にdomの存在確認で条件分岐。（lengthで判断） ・&&を使

Parallax.toggle(); ・発火と実行を分ける ・条件分岐の数値は変数でとる ・js-parallax is-parallaxのようにターゲット用のクラスをjsで設ける。isで状態を管理する。 ・発火の際にdomの存在確認で条件分岐。（lengthで判断） ・&&を使えば存在確認をしつつ条件分岐できる。

trigger.js
content_copyfile_download
  import * as Parallax from '../parallax';


  $(window)
    .on('scroll resize',function(){
    let $width = $(window).width();
    let mqSP = 1023;
    if($width > mqSP){
      Parallax.toggle();
    }
  });
parallax.js
content_copyfile_download
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');
  }
}
_parallax.scss
content_copyfile_download
.is-parallax{
  background-attachment: fixed;
}