https://www.so-ta.com/wp-content/themes/so-ta/assets/js/common.js

1var $window = $(window);
2var $body = $('body');
3var $header = $('#HEADER');
4var headerH = 0;
5var $footer = $('#FOOTER');
6var footerH = 0;
7var $navi = $('.pageNavi');
8var naviH = 0;
9var $pagetop = $('#PAGETOP');
10var scrollH = 0;
11var scrollPos = 0;
12var startPos = 0;
13var winScrollTop = 0;
14var spacer = 0;
15var isiOS;
16$pagetop.hide();
17
18function checkBrowser() {
19  var userAgent = window.navigator.userAgent.toUpperCase();
20  isiOS = userAgent.indexOf('IPHONE') > -1 || userAgent.indexOf('IPAD') > -1 || userAgent.indexOf('MACINTOSH') > -1 && 'ontouchend' in document;
21  if (!(userAgent.indexOf('MSIE') === -1 && userAgent.indexOf('TRIDENT') === -1)) {
22    $body.addClass('IE11');
23  }
24}
25checkBrowser();
26
27function checkDevice() {
28  $window.on('breakpoint-pc', function () {
29    $body.removeClass('SP').addClass('PC');
30  });
31
32  $window.on('breakpoint-sp', function () {
33    $body.removeClass('PC').addClass('SP');
34  });
35}
36checkDevice();
37
38var mql = window.matchMedia('(min-width: 768px)');
39var handleMediaQuery = function (mql) {
40  if (mql.matches) {
41    $window.trigger('breakpoint-pc');
42  } else {
43    $window.trigger('breakpoint-sp');
44  }
45};
46mql.addListener(handleMediaQuery);
47handleMediaQuery(mql);
48
49var scroll = new SmoothScroll('a[href*="#"]', {
50  speed: 500,
51  header: '#HEADER',
52  speedAsDuration: true,
53  topOnEmptyHash: true,
54  updateURL: false,
55});
56
57$window.on({
58  'load scroll': function () {
59    headerH = $header.outerHeight();
60    footerH = $footer.outerHeight();
61    naviH = $navi.outerHeight();
62    scrollH = $(document).height();
63    winScrollTop = $(this).scrollTop();
64    scrollPos = $(this).height() + winScrollTop;
65    spacer = 0;
66    if (winScrollTop >= headerH) {
67      $pagetop.fadeIn();
68      $header.addClass('fixed');
69    } else {
70      $pagetop.fadeOut();
71      $header.removeClass('fixed');
72    }
73
74    if (scrollH - scrollPos <= footerH - spacer) {
75      $pagetop.addClass('bottom');
76      $body.addClass('bottom');
77    } else {
78      $pagetop.removeClass('bottom');
79      $body.removeClass('bottom');
80    }
81    scrollFadeIn();
82    scrollAnimeFunction();
83  },
84  'load': function () {
85    $body.addClass('loaded');
86    deSVG('.svg', true);
87  },
88  'scroll': function () {
89    $header.css('left', - $window.scrollLeft());
90  }
91});
92
93function spMenuFunction() {
94  $('.hamburger').on('click', function () {
95    if ($body.hasClass('openMenu')) {
96      closeMenu();
97    } else {
98      $body.addClass('openMenu');
99      bodyFixedOn();
100    }
101    return false;
102  });
103
104  function closeMenu() {
105    bodyFixedOff();
106    $body.removeClass('openMenu');
107  }
108
109  $('.gnaviList_item > a').on('click', function () {
110    if ($(this).next('.subnavi').length) {
111      if ($(this).parents('.gnaviList_item').hasClass('is-open')) {
112        $(this).parents('.gnaviList_item').removeClass('is-open');
113        $(this).next('.subnavi').slideUp(500);
114      } else {
115        $(this).parents('.gnaviList_item').addClass('is-open');
116        $(this).next('.subnavi').slideDown(500);
117      }
118      return false;
119    }
120  });
121
122  function bodyFixedOn() {
123    if (isiOS) {
124      // iOSの場合
125      scrollPos = $(window).scrollTop();
126      $body.css('position', 'fixed');
127      $body.css('top', '-' + scrollPos + 'px');
128    }
129  }
130
131  //bodyのスクロール固定を解除
132  function bodyFixedOff() {
133    if (isiOS) {
134      // iOSの場合
135      $body.css('position', '');
136      $body.css('top', '');
137      $(window).scrollTop(scrollPos);
138    }
139  }
140}
141spMenuFunction();
142
143function tabMenuFunc() {
144  if ($('.tabArea').length) {
145    $('.tabArea .tab').each(function () {
146      $(this).on('click', function () {
147        var index = $(this).index();
148        $(this).parents('.tabArea').find('.tab').removeClass('is-active');
149        $(this).parents('.tabArea').next('.tabContentsArea').children('.tabContents').hide();
150        $(this).parents('.tabArea').find('.tab').eq(index).addClass('is-active');
151        $(this).parents('.tabArea').next('.tabContentsArea').children('.tabContents').eq(index).fadeIn();
152        return false;
153      });
154    });
155  }
156}
157tabMenuFunc();
158
159function otherPageAnchorFunc() {
160  var urlHash = location.hash;
161  if (urlHash) {
162    $('body,html').stop().scrollTop(0);
163    setTimeout(function () {
164      var target = $(urlHash);
165      var position = target.offset().top - headerH;
166      $('body,html').stop().animate({ scrollTop: position }, 1);
167    }, 100);
168  }
169}
170otherPageAnchorFunc();
171
172function scrollFadeIn() {
173  $('.fade-in').each(function () {
174    var offset_top = $(this).offset().top,
175      window_bottom = $(window).scrollTop() + $(window).innerHeight() - 40;
176    if (offset_top < window_bottom && !$(this).hasClass('slide-in')) {
177      $(this).addClass('slide-in');
178    }
179  });
180}
181function faqFunc() {
182  $('.faq_a').hide();
183  $('.faq_q').on('click', function () {
184    $(this).parents('.faq').toggleClass('is-open').children('.faq_ico').toggleClass('is-open');
185    $(this).next('.faq_a').slideToggle();
186  });
187}
188faqFunc();
189
190function inviewFunc() {
191  $('.fade-in').each(function () {
192    $(this).addClass('fade-out');
193  });
194}
195inviewFunc();
196
197function scrollAnimeFunction() {
198  var scTop = $(this).scrollTop();
199  var scBottom = scTop + $(this).height();
200  $('.inview').each(function (i) {
201    var thisPos = $(this).offset().top + 100;
202    if (thisPos < scBottom) {
203      $(this).addClass('animate');
204    }
205  });
206  $('.inview-group').each(function (i) {
207    var thisPos = $(this).offset().top + 100;
208    if (thisPos < scBottom) {
209      $('.inview-list', this).each(function (i) {
210        $(this).delay(i * 300).queue(function (next) {
211          $(this).addClass('animate');
212          next();
213        });
214      });
215    }
216  });
217}
218
219function gnaviFunction() {
220  var pageURL = location.pathname;
221  var pageURLArr = pageURL.split('/');
222  var pageURLArrCategory = pageURLArr[1];
223  var pageURLArrCategory2 = pageURLArr[2];
224  // TEST
225  // var pageURLArrCategory = pageURLArr[4];
226  // var pageURLArrCategory2 = pageURLArr[5];
227  var $naviItem = $('.gnaviList_item');
228  var $naviItem2 = $('.childList_item');
229  var currentClass = 'is-current';
230  // console.log(pageURLArr);
231  // console.log(pageURLArrCategory);
232  // console.log(pageURLArrCategory2);
233  switch (pageURLArrCategory){
234    case 'about':
235      $naviItem.eq(0).addClass(currentClass);
236      break;
237    case 'products':
238      $naviItem.eq(1).addClass(currentClass);
239      break;
240    case 'series':
241      $naviItem.eq(2).addClass(currentClass);
242      break;
243    case 'archive':
244      $naviItem.eq(3).addClass(currentClass);
245      break;
246    case 'company':
247      $naviItem.eq(4).addClass(currentClass);
248      break;
249    case 'access':
250      $naviItem.eq(5).addClass(currentClass);
251      break;
252    case 'news':
253      $naviItem.eq(6).addClass(currentClass);
254      break;
255    case 'contact':
256      $naviItem.eq(7).addClass(currentClass);
257      break;
258    case 'sitepolicy':
259      $naviItem.eq(8).addClass(currentClass);
260      break;
261    default:
262      break;
263  }
264
265  $naviItem2.each(function(){
266	  if($(this).hasClass(pageURLArrCategory2)){
267		  $(this).addClass(currentClass);
268	  }
269  });
270
271  /*
272  switch (pageURLArrCategory2) {
273    case 'capsuletoy':
274      $naviItem2.hasClass(pageURLArrCategory2).addClass(currentClass);
275      break;
276    case 'amusement':
277      $naviItem2.eq(1).addClass(currentClass);
278      break;
279    case 'retailproducts':
280      $naviItem2.eq(2).addClass(currentClass);
281      break;
282    case 'creator':
283      $naviItem2.eq(3).addClass(currentClass);
284      break;
285    case 'enterprise':
286      $naviItem2.eq(4).addClass(currentClass);
287      break;
288    default:
289      break;
290  }
291  */
292}
293gnaviFunction();
294
295$('.accordion_header').on('click', function() {
296  $(this).toggleClass('is-active').next('.accordion_contents').slideToggle();
297});