https://www.yayoidizel.co.jp/_templates/responsive_type30_color/js/common.js

1// JavaScript Document
2
3(function($){
4  
5  // 特定のヘッダー用コンテンツパーツを使用した場合のHEADERの高さ
6  $(window).on('load resize', function(){
7    if (window.matchMedia( '(min-width: 992px)' ).matches) {
8      $('.siteblock-header .cparts-header-block:not(.cparts-id468--01)').each(function(){
9        var headerPartsH01 = $(this).outerHeight(true);
10        $('.siteblock-header div > .navbar-nav').css({'marginTop':headerPartsH01 + 'px'});
11      });
12    }
13    if (window.matchMedia( '(min-width: 1200px)' ).matches) {
14      $('.siteblock-header .cparts-header-block.cparts-id468--01').each(function(){
15        var headerPartsH02 = $(this).outerHeight(true);
16        $('#sitedesign-pagetop').css({'height':headerPartsH02 + 'px'});
17      });
18    }
19  });
20
21  // スマホ用テーブル縦表示classの追加
22  $(window).on('load resize', function(){
23      var tableW = $('form table').outerWidth(); //フォーム内のテーブルの幅を取得
24      var w = 737; //分岐になる幅
25      if ( tableW <= w) {
26          $('.mailform-table').addClass('table-style--row'); //メールフォームのテーブルにclass追加
27          $('.commentFormBox table').addClass('table-style--row'); //ブログコメント（入力画面）のテーブルにclass追加
28      }else{
29          $('.mailform-table').removeClass('table-style--row');
30          $('.commentFormBox table').removeClass('table-style--row');
31      }
32      
33      var tableW02 = $('.blogCommentsBox table').outerWidth(); //フォーム内のテーブルの幅を取得
34      if ( tableW02 <= w) {
35          $('.blogCommentsBox table').addClass('table-style--row');  //ブログコメント（確認画面）のテーブルにclass追加
36      }else{
37          $('.blogCommentsBox table').removeClass('table-style--row');
38      }
39  });
40
41
42
43$(window).on('load', function() {
44  $('body').addClass('sitedesign-body-onload');
45
46    $('h1').each(function () {
47      if ($(this).parents("div[class^='cparts-']").length === 0 && $(this).parents("div[class^='parts_']").length === 0) {
48      var text = $(this).text();
49      var textbox = "";
50      text.split('').forEach(function (t, i) {
51        if (t !== " ") {
52          if (i < 10) {
53            textbox += '<span style="transition-delay:.' + i + 's;">' + t + '</span>';
54          } else {
55            var n = i / 10;
56            textbox += '<span style="transition-delay:' + n + 's;">' + t + '</span>';
57          }
58        } else {
59          textbox += t;
60        }
61      });
62      $(this).html(textbox);
63      }
64    });
65    $('h1').find('span').each(function() {
66      if ($(this).text() == ',') {
67        $(this).html('<br/>');
68      }
69    });
70    setTimeout(function() {
71      $('h1').find('span').addClass("sitedesign-appeartext");
72    }, 600);
73});
74  
75if (window.matchMedia( "(max-width: 767px)" ).matches) {
76  $('.navbar-default').find('.navbar-collapse').children('ul').children('li').each(function() {
77    if ($(this).children('ul').length > 0) {
78      $(this).append('<span class="sitedesign-navbar-arrow-down"></span>');
79    }
80  });
81
82}
83$('.sitedesign-navbar-arrow-down').on('click', function() {
84  $(this).parent('li').children('ul').slideToggle(300);
85  $(this).toggleClass('sitedesign-navbar-arrow-down-open');
86});
87var state = false;
88var pos;
89$(document).on('click', '.navbar-toggle', function(e) {
90  e.preventDefault();
91  $(this).parents('.navbar').toggleClass('sitedesign-navbar-open');
92  $(this).parents('.navbar').find('.navbar-collapse').slideToggle(400);
93
94  if (state == false) {
95    $('body').css({'transition': '0s'});
96    pos = window.pageYOffset || document.documentElement.scrollTop;
97      $('body').addClass('fixed').css({'top': -pos});
98    state = true;
99  } else {
100    $('body').css({'transition': '.5s'});
101    $('body').removeClass('fixed').css({'top': 0});
102    window.scrollTo(0, pos);
103    state = false;
104  }
105  setTimeout(function() {
106    $('.navbar').find('.sitedesign-navbar-arrow-down').removeClass('sitedesign-navbar-arrow-down-open');
107    $('.sitedesign-navbar-arrow-down').parent('li').children('ul').hide();
108  }, 500);
109});
110$('.navbar-default').find('.navbar-collapse > .navbar-nav > li').children('a').on('mouseover', function() {
111    if (window.matchMedia( "(min-width: 768px)" ).matches) {
112        $(this).parent('li').children('ul').fadeIn(300);
113    }
114});
115$('.navbar-default').find('.navbar-collapse > .navbar-nav > li').on('mouseleave', function() {
116    if (window.matchMedia( "(min-width: 768px)" ).matches) {
117        $(this).children('ul').fadeOut(300);

118    }
119});
120
121if (window.matchMedia( "(min-width: 768px)" ).matches) {
122    $('.navbar-default').append('<div class="sitedesign-navbar-default-back"></div>');
123    let array = [];
124    let sum = 0;
125    $('.navbar-default').find('.navbar-collapse > .navbar-nav > li').each(function(i,element) {
126      array.push($(this).width());
127    });
128    console.log(array);
129    for (let i = 0; i < array.length; i++) {
130        sum += array[i];
131    }
132    console.log(sum);
133    let back = sum + 35;
134    $('.sitedesign-navbar-default-back').css('width', 'calc(100% - '+back+'px)');
135    if ($('.navbar-default').find('.navbar-collapse').children('ul').height() > 100) {
136      $('.sitedesign-navbar-default-back').hide();
137    }
138    console.log($('.navbar-default').find('.navbar-collapse').children('ul').height());
139}
140
141$(window).scroll(function () {
142  if ($(this).scrollTop() > 60) {
143    $('.navbar-default').addClass('sitedesign-navbar-default-back-on');
144  } else {
145    $('.navbar-default').removeClass('sitedesign-navbar-default-back-on');
146  }
147});
148  
149// HEADERメニューリンククリック時にメニューを閉じる（ページ内リンク対策）
150  $(function(){
151    $('.navbar-collapse a').on('click', function () {
152      $('.navbar-toggle').addClass('collapsed');
153      $(this).parents('.navbar').removeClass('sitedesign-navbar-open');
154      $('.navbar-collapse').removeClass('in');
155      $('body').removeClass('fixed');
156      $(this).parents('.navbar').find('.navbar-collapse').slideUp(400);
157    });
158  });
159
160
161$('.albumDetail').find('.pageLink').find('li').each(function() {
162if (!$(this).hasClass('nextBu') && !$(this).hasClass('prevBu')) {
163  $(this).addClass('sitedesign-mainBu');
164}  
165});
166
167
168  // スムーススクロールの共通関数
169  function smoothScrollTo(target, updateHash = true) {
170    if (target.length) {
171      var position;
172
173      if (window.innerWidth >= 768 && window.innerWidth <= 1199) {
174        var headerH = $('.siteblock-header .navbar-default').innerHeight();
175        // 画面幅が768px〜1199pxのとき → ターゲットの位置から40px引く
176        position = target.offset().top - headerH - 40;
177      } else {
178        // それ以外（PC・スマホ） → ヘッダー高さを考慮
179        var headerH = $('.siteblock-header .navbar-default').innerHeight();
180        position = target.offset().top - headerH;
181      }
182
183      $('html, body').stop(true).animate({ scrollTop: position }, 300, function() {
184        if (updateHash) {
185          history.replaceState(null, null, '#' + (target.attr('id') || target.attr('name'))); // URLのハッシュを更新
186        }
187      });
188    }
189  }
190
191  // `id` だけでなく、`name` 属性のアンカーにも対応
192  function getAnchorTarget(hash) {
193    var target = $(hash);
194
195    // `id` が存在しない場合、`name` 属性を探す
196    if (!target.length) {
197        target = $('a[name="' + hash.replace('#', '') + '"]');
198    }
199
200    return target;
201  }
202
203  // 別ページからの遷移対応（iOS向けの修正）
204  $(window).on('load', function() {
205    if (location.hash) {
206        // まずページトップへスクロール（iOSでは scrollTo を使用）
207        setTimeout(function() {
208            window.scrollTo(0, 0); // iOSでは scrollTop(0) が効かない場合があるため、これを使用
209        }, 10); // 10ms 遅延を入れることで処理の安定性を向上
210
211        setTimeout(function() {
212            var target = getAnchorTarget(location.hash);
213            smoothScrollTo(target, false); // ハッシュの更新を無効化
214            if (target.length) {
215              var position;
216              if (window.innerWidth >= 768 && window.innerWidth <= 1199) {
217                var headerH = $('.siteblock-header .navbar-default').innerHeight();
218                position = target.offset().top - headerH - 40; // ← 調整量
219              } else {
220                var headerH = $('.siteblock-header .navbar-default').innerHeight();
221                position = target.offset().top - headerH; // ← 調整量
222              }
223              $('html, body').stop(true).animate({ scrollTop: position }, 300);
224            }            
225        }, 600); // 600ms 遅延してヘッダーの高さが確定するのを待つ
226    }
227  });
228
229  // アンカーリンクのスムーススクロール処理
230  $(document).on('click', 'a[href*="#"]', function(e) {
231    var target = getAnchorTarget(this.hash);
232
233      // スマホメニューが開いている場合は閉じる
234      if ($('.navbar').has('sitedesign-navbar-open')) {
235          $('.navbar').removeClass('sitedesign-navbar-open');
236
237          setTimeout(function() {
238              smoothScrollTo(target);
239          }, 1000); // メニュー閉じた後にスクロール実行
240      } else {
241          smoothScrollTo(target);
242      }
243  });
244  
245}(jQuery));