https://lookmee.jp/assets/js/common.js

1
2(function($) {
3  $(function() {
4
5    /**
6     * scroll
7     */
8    var lastScrollTop = null;
9    var $header = $(".st-Header");
10    var $spMenu = $(".st-Header_NavCheckbox");
11    var $toTop  = $(".st-toTop");
12    var $fiexdBanner = $(".st-Banner_FooterFixed");
13    var $fiexdLine = $(".st-Line_FooterFixed");
14
15    $(window).on("scroll", onScroll);
16    window.requestAnimationFrame(onScroll);
17
18    function onScroll() {
19      var windowScrollTop = $(window).scrollTop();
20      if (
21        lastScrollTop !== null &&
22        Math.abs(lastScrollTop - windowScrollTop) < 1
23      ) {
24        window.requestAnimationFrame(onScroll);
25        return;
26      }
27
28      var windowHeight = $(window).height();
29      var windowScrollEnd = windowScrollTop + windowHeight;
30
31
32      // header visible
33      if(windowScrollTop >= 1100 ){
34        $header.removeClass("st-Header--hide").addClass("st-Header--fixed");
35        $toTop.addClass("st-toTop--visible");
36      } else if(windowScrollTop <= 800 ){
37        $header.removeClass("st-Header--hide").removeClass("st-Header--fixed");
38      } else {
39        if($spMenu.prop('checked')){return;}
40        $header.addClass("st-Header--hide");
41        $toTop.removeClass("st-toTop--visible");
42
43      }
44
45      if($spMenu.prop('checked')){
46        $header.addClass("st-Header--fixed");
47        return;
48      }
49
50      if(windowScrollTop >= 600 ){
51        $fiexdBanner.addClass("st-Banner--fixed");
52        $fiexdLine.addClass("st-Line--fixed");
53      }
54
55      lastScrollTop = windowScrollTop;
56      window.requestAnimationFrame(onScroll);
57    }
58  });
59  var $toTopLink = $(".st-toTop--link");
60  $toTopLink.click(function(){
61    $('body, html').animate({ scrollTop: 0 }, 500);
62    return false;
63  });
64  var $fiexdBannerClose = $(".st-Banner_FooterFixed--close");
65  $fiexdBannerClose.click(function(){
66    $(".st-Banner_FooterFixed").css("display","none");
67  });
68
69  var faqTag = '.faq-Tag,.news-Tag,.event-Tag';   // 絞り込む項目
70    var faqItem = '.FAQ_Item--Wrapper,.News_Item--Wrapper,.Event_Item--Wrapper';       // 絞り込み対象
71    var hideClass = 'is-hide';         // 絞り込み対象外の要素に付与されるclass名
72    var activeClass = 'is-active';     // 選択中のグループに付与されるclass名
73    $(function() {
74      // 絞り込みを変更した時
75      $(faqTag).on('click', function() {
76        $(faqTag).removeClass(activeClass);
77        var group = $(this).addClass(activeClass).data('group');
78        search_filter(group);
79      });
80    });
81    /**
82    * リストの絞り込みを行う
83    * @param {String} group data属性の値
84    */
85    function search_filter(group) {
86      // 非表示状態を解除
87      $(faqItem).removeClass(hideClass);
88      // 値が空の場合はすべて表示
89      if(group === '') {
90        return;
91      }
92      // リスト内の各アイテムをチェック
93      for (var i = 0; i < $(faqItem).length; i++) {
94        // アイテムに設定している項目を取得
95        var itemData = $(faqItem).eq(i).data('group');
96        // 絞り込み対象かどうかを調べる
97        // if(itemData !== group) {
98        if (itemData.indexOf(group) === -1) {
99          $(faqItem).eq(i).addClass(hideClass);
100        }
101      }
102    }
103    // スムーススクロール
104    $('a[href*="#"]').click(function () {
105      var elmHash = $(this).attr('href');
106      var pos = $(elmHash).offset().top-100;
107      $('body,html').animate({scrollTop: pos}, 500);
108      return false;
109    });
110})(window.jQuery);