https://yomikago.jp/wp2020/wp-content/themes/yomikago/js/myScript.js

1// ==============================
2//  スティッキーヘッダー
3//  ふわっと表示（フェードイン）
4//  ローディング
5// ==============================
6jQuery(document).ready(function ($) {
7
8  //  スティッキーヘッダー
9  // var $win = $(window),
10  //   $main = $('main'),
11  //   $nav = $('nav'),
12  //   navHeight = $nav.outerHeight(),
13  //   navPos = $nav.offset().top,
14  //   fixedClass = 'is-fixed',
15  //   animationClass = 'is-animation';
16
17  // $win.on('load scroll', function () {
18  //   var value = $(this).scrollTop();
19  //   if (value > navPos) {
20  //     $nav.addClass(fixedClass);
21  //     $nav.addClass(animationClass);
22  //     $main.css('margin-top', navHeight);
23  //   } else {
24  //     $nav.removeClass(animationClass);
25  //     $nav.removeClass(fixedClass);
26  //     $main.css('margin-top', '0');
27  //   }
28  // });
29  //  ふわっと表示（フェードイン）
30  $(window).scroll(function () {
31    $('.fadein').each(function () {
32
33      var targetElement = $(this).offset().top;
34      var scroll = $(window).scrollTop();
35      var windowHeight = $(window).height();
36
37      if (scroll > targetElement - windowHeight + 200) {
38        $(this).css('opacity', '1');
39        $(this).css('transform', 'translateY(0)');
40      }
41
42    });
43  });
44
45  // ローディング
46  $('.loader').fadeOut();
47  $('.l-loader').delay(350).fadeOut('slow');
48
49  // スライダー
50  $('.carousel').carousel();
51
52  // スマートフォン時、.tel-link クラスに a 要素を追加する ※タップしてTELすることができる
53  var device = navigator.userAgent;
54  if ((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0) {
55    $('.tel-link').each(function () {
56      var str = $(this).text();
57      $(this).html($('<a class="">').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
58    });
59  }
60
61  // toPageTop スクリプト
62  var topBtn = $('#toPageTop');
63  topBtn.hide();
64  // スクロールが500に達したらボタン表示
65  $(window).scroll(function () {
66    if ($(this).scrollTop() > 500) {
67      topBtn.fadeIn();
68    } else {
69      topBtn.fadeOut();
70    }
71  });
72  topBtn.click(function () {
73    $('body,html').animate({
74      scrollTop: 0
75    }, 500);
76    return false;
77  });
78
79  // ページ内リンク
80  var offset = 100;
81  // $('a[href^*="#"]').click(function() {
82  $('a[class*="pagelink"]').click(function () {
83    var speed = 800;
84    var href = jQuery(this).attr("href");
85    var target = jQuery(href == "#" || href == "" ? 'html' : href);
86    var position = target.offset().top - offset;
87    jQuery('body,html').animate({
88      scrollTop: position
89    }, speed, 'swing');
90    return false;
91  });
92
93  // アコーディオンの文言変更
94  // <a class="btn-accordion" id="accordion-01" data-val="すべて表示する" data-toggle="collapse" href="#accordion01" aria-controls="#accordion01" aria-expanded="false">すべて表示する</a>
95  $(".btn-accordion").each(function () {
96    var idMei = $(this).attr("id");
97    document.getElementById(idMei).onclick = handleClick;
98
99    function handleClick() {
100      var originText = $(this).data('val');
101      this.text = (this.text == originText ? '閉じる' : originText);
102    }
103  });
104});