https://sacraweb.jp/wp-content/themes/zousanrecordspro/js/frame.js

1/*==================================================================
2
3	frame.js
4	
5==================================================================*/
6
7jQuery(function ($) {
8  /*------------------------------------------------
9
10	[ setting ]
11	
12	hws : header_wrap のスクロールイベント
13		type
14			a：header_wrapを特定のY(adjust)クラス付与(header_wrap_change)
15				opt
16					hwInitHeight : [必須]初期のheader_wrap.outerHeight(true) * マージン含む
17					adjust       : 変化するY header_wrap.height に加算分
18			b：header_wrapが通常スクロールの後再表示 & クラス付与(header_wrap_change)
19				opt
20					hwInitHeight : [必須]初期のheader_wrap.outerHeight(true) * マージン含む
21					adjust       : 変化するY header_wrap.height に加算分
22			c：下にスクロールでheader_wrap非表示・上にスクロールで表示
23				opt -
24					hwInitHeight : [必須]初期のheader_wrap.outerHeight(true) * マージン含む
25					adjust       : 変化するY header_wrap.height に加算分
26			z：アクションなし
27				opt -
28			(sample)
29				pc : { adjust : 100 }
30
31------------------------------------------------*/
32
33  var setting = {
34    hws: {
35      type: {
36        sp: 'a',
37        spyoko: 'c', // spモード & 横向き ※ 'c'推奨
38        tb: 'a',
39        pc: 'a',
40      },
41      opt: {
42        sp: { hwInitHeight: 91, adjust: 200 },
43        spyoko: { hwInitHeight: 91, adjust: 200 },
44        tb: { hwInitHeight: 91, adjust: 200 },
45        pc: { hwInitHeight: 121, adjust: 200 },
46      },
47    },
48  };
49
50  /*------------------------------------------------
51
52	[ structure ]
53
54------------------------------------------------*/
55
56  var // dom base
57    $container = $('.container'),
58    $hw = $('#header_wrap'),
59    $gnav = $('#gnav'),
60    $gnavHandle = $('#gnav_btn'),
61    // resize
62    status = 'none', // sp( max599 ) / sp_yoko( min600&max1024&yoko ) / tb( min600&max1024 ) / pc( min1025 )
63    // hws : header_wrap_scroll
64    hwsFlag = true, // hws実行フラグ
65    hwsType, // hwsタイプ a / b / c
66    hwsOpt = {}, // hwsオプション
67    hwh, // #header_wrap.outerHeight()
68    st, // scrollTop
69    hwsOptHWIH, // hwsOpt header_wrap高さ初期値 * 必須
70    hwsOptAdjs, // hwsOpt adjust
71    // gno : gnav_open
72    gnoFlag = true, // gno実行フラグ
73    winlock, // windowLockフラグ
74    tmpst; // winlock時のscrollTop
75
76  /* --- main --- */
77  function main() {
78    // status変更時1回だけ実行
79    if (window.matchMedia('(max-width:599px)').matches) {
80      statusChange('sp');
81    } else if (
82      window.matchMedia('(max-width:1024px)').matches &&
83      window.innerWidth > window.innerHeight
84    ) {
85      statusChange('spyoko');
86    } else if (window.matchMedia('(max-width:1024px)').matches) {
87      statusChange('tb');
88    } else {
89      statusChange('pc');
90    }
91  }
92
93  /* sc : status_change */
94  function statusChange(argStatus) {
95    // status
96    if (status !== argStatus) {
97      status = argStatus;
98      //console.log( 'status[ ' + status + ' ], argStatus[ ' + argStatus + ' ], hwsType[ ' + hwsType + ' ]' );
99      // init : status変更時1回だけ実行
100      settingParse(status);
101      hwsInit();
102      gnoInit();
103    }
104  }
105
106  /* settingParse : status変更時1回だけ実行 */
107  function settingParse(argStatus) {
108    hwsType = setting.hws.type[argStatus];
109    hwsOpt = setting.hws.opt[argStatus];
110    // body と header_wrap にクラス付与
111    wrapClass();
112  }
113
114  /* --- setup : readyで以下をscrollにバインド --- */
115  function setup() {
116    // core
117    gnoCore();
118    hwsCore();
119  }
120
121  /*------------------------------------------------
122
123	[ fn : hws ]
124	 header_wrap のスクロールイベント
125
126------------------------------------------------*/
127
128  /* hwsInit : status変更時1回だけ実行 */
129  function hwsInit() {
130    // hwsOpt
131    hwsOptHWIH = 'hwInitHeight' in hwsOpt ? hwsOpt.hwInitHeight : 'error'; // hwh 初期値
132    hwsOptAdjs = 'adjust' in hwsOpt ? hwsOpt.adjust : 100; // headerWrap 固定されるY座標
133    hwsOptAdjs = hwsOptAdjs < 10 ? 10 : hwsOptAdjs; // 最小値を10px
134
135    // hws_base
136    st = $(window).scrollTop();
137

138    // ready状態ののheader_wrap.height 取得（* wpadminbar調整 & containerのpadding-top調整）
139    if (hwsOptHWIH === 'error') {
140      alert('必須hwh初期値が設定されていません！');
141    } else {
142      $hw.css({ top: wpadminbarheight() });
143      hwh = hwsOptHWIH + wpadminbarheight();
144      $container.css({ 'padding-top': hwsOptHWIH });
145    }
146
147    // 各タイプ初期値
148    /* hws-a */
149    if (hwsFlag && hwsType === 'a') {
150      $hw.css({ position: 'fixed' });
151      if (st < hwh + hwsOptAdjs) {
152        $hw.removeClass('header_wrap_change');
153      } else {
154        $hw.addClass('header_wrap_change');
155      }
156      /* hws-b */
157    } else if (hwsFlag && hwsType === 'b') {
158      if (st < hwh) {
159        $hw
160          .removeClass('header_wrap_change')
161          .css({ top: 0, position: 'absolute' });
162      } else if (st < hwh + hwsOptAdjs / 2) {
163        $hw
164          .addClass('header_wrap_change')
165          .css({ top: -1 * hwh, position: 'absolute' });
166      } else if (st < hwh + hwsOptAdjs) {
167        $hw.addClass('header_wrap_change');
168        var tempHwh = $hw.outerHeight();
169        $hw.css({ top: -1 * tempHwh, position: 'fixed' });
170      } else {
171        $hw.css({ top: 0, position: 'fixed' });
172      }
173      /* hws-c */
174    } else if (hwsFlag && hwsType === 'c') {
175      $hw.css({ position: 'fixed' });
176      if (st < hwh + hwsOptAdjs) {
177        $hw.removeClass('header_wrap_change');
178      } else {
179        $hw.addClass('header_wrap_change');
180      }
181    }
182  }
183
184  /* hwsCore : readyで以下をscrollにバインド */
185  function hwsCore() {
186    var before = $(window).scrollTop();
187
188    $(window).on('scroll', function () {
189      st = $(this).scrollTop();
190
191      /* hws-a */
192      if (hwsFlag && hwsType === 'a') {
193        if (st < hwh + hwsOptAdjs) {
194          $hw.removeClass('header_wrap_change');
195        } else {
196          $hw.addClass('header_wrap_change');
197        }
198
199        /* hws-b */
200      } else if (hwsFlag && hwsType === 'b') {
201        if (st < hwh) {
202          $hw.css({ top: 0 });
203        } else if (st < hwh + hwsOptAdjs / 2) {
204          $hw
205            .removeClass('header_wrap_change')
206            .css({ top: -1 * hwh, position: 'absolute' });
207        } else if (st < hwh + hwsOptAdjs) {
208          $hw.addClass('header_wrap_change');
209          var tempHwh = $hw.outerHeight();
210          $hw.css({ top: -1 * tempHwh, position: 'fixed' });
211        } else {
212          $hw.css({ top: 0 });
213        }
214
215        /* hws-c */
216      } else if (hwsFlag && hwsType === 'c') {
217        // down（ページが上に移動 scrollDown）
218        if (st > before && st > hwh) {
219          $hw.css({ top: -1 * hwh });
220          // up（ページが下に移動 scrollUp）
221        } else {
222          $hw.css({ top: 0 });
223        }
224        if (st < hwh + hwsOptAdjs) {
225          $hw.removeClass('header_wrap_change');
226        } else {
227          $hw.addClass('header_wrap_change');
228        }
229        before = st;
230      }
231    });
232  }
233
234  /*------------------------------------------------
235
236	[ fn : gno ]
237	gno : gnav のsp/tbでのオープンイベント
238
239------------------------------------------------*/
240
241  /* gnoInit : status変更時1回だけ実行 */
242  function gnoInit() {
243    if (status === 'pc') {
244      $gnav
245        .css({ top: '', paddingTop: '', marginLeft: '', width: '' })
246        .show()
247        .removeClass('open');
248      windowLock('off');
249    } else {
250      // gnav 開いた状態でstatus_change した場合
251      var gnavy = $hw.outerHeight(true) + $hw.position().top;
252      $gnav.css({ top: gnavy });
253      if (winlock === false) {
254        $gnav.removeClass('open');
255        $gnavHandle.removeClass('close').addClass('menu').show();
256      }
257    }
258  }
259
260  /* gnoCore : readyで以下をscrollにバインド */
261  function gnoCore() {
262    $gnavHandle.on('click', function () {
263      // gnav_open
264      if ($gnavHandle.hasClass('menu')) {
265        // hws再開
266        hwsFlag = false;
267        // gno
268        gnoFlag = 'open';
269        // gnav_close
270      } else if ($gnavHandle.hasClass('close')) {
271        // hws停止
272        hwsFlag = true;
273        // gno

274        gnoFlag = 'close';
275      }
276      var gnavy = $hw.outerHeight(true) + $hw.position().top;
277      if (gnoFlag === 'open') {
278        $gnav.css({ top: gnavy }).addClass('open');
279        $gnavHandle.removeClass('menu').addClass('close');
280      } else {
281        $gnav.css({ top: gnavy }).removeClass('open');
282        $gnavHandle.removeClass('close').addClass('menu');
283      }
284
285      /* windowLock */
286      if (gnoFlag === 'open') {
287        // window_lock
288        windowLock('on');
289      } else {
290        // window_lock
291        windowLock('off');
292      }
293    });
294  }
295
296  /*------------------------------------------------
297
298	[ fn : util ]
299	利用関数
300
301------------------------------------------------*/
302
303  // wpadminbarの高さ
304  function wpadminbarheight() {
305    var h =
306      typeof $('#wpadminbar').outerHeight() === 'undefined'
307        ? 0
308        : $('#wpadminbar').outerHeight();
309    return h;
310  }
311
312  // gnavオープン時の画面ロック
313  function windowLock(arg) {
314    if (arg === 'on') {
315      tmpst = $(window).scrollTop();
316      $('body').css({ position: 'fixed', width: '100%', top: -1 * tmpst });
317      winlock = true;
318    } else if (arg === 'off') {
319      tmpst = tmpst === undefined ? 0 : tmpst;
320      $('body').css({ position: '', width: '', top: '' });
321      if (winlock) {
322        $(window).scrollTop(tmpst);
323      }
324      winlock = false;
325    }
326  }
327
328  // dom_wrap にクラス付与
329  function wrapClass() {
330    $('body')
331      .removeClass('status_sp status_spyoko status_tb status_pc')
332      .addClass('status_' + status);
333    $hw
334      .removeClass('hws_type_a hws_type_b hws_type_c hws_type_o')
335      .addClass('hws_type_' + hwsType);
336  }
337
338  /*------------------------------------------------
339	--- run ---
340------------------------------------------------*/
341
342  $(function () {
343    $(window).on('resize orientationchange', function () {
344      main();
345    });
346    main();
347    setup();
348  });
349});