https://hime-navi.com/share/js_responsive/result.js?d=20261002

1var win = $(window);
2var winWidth = $(window).width();
3var winHeight = $(window).height();
4var hdHeight = $('header').outerHeight();
5var nav = $('#result-nav');
6var navHeight = nav.outerHeight();
7
8//フロートナビ
9win.on('load', function() {
10  var condNav = $('#result-nav-cond');
11
12  nav.show();
13
14  var condNavHeight = condNav.outerHeight();
15
16  nav.css({
17    'top': -navHeight + 'px'
18  });
19
20  condNav.css({
21    'top': -condNavHeight + 'px'
22  });
23
24  win.on('scroll', function() {
25    if (win.scrollTop() > hdHeight - navHeight) {
26
27      // ヘッダー固定している場合は 追加ヘッダー位置を再計算して調整
28      if ($('header').css('position') == 'fixed') {
29        hdHeight = $('header').outerHeight();
30
31        nav.css({
32          'top': hdHeight
33        });
34      } else {
35        nav.css({
36          'top': 0
37        });
38      }
39
40      nav.css({
41        'border-color': '#dadada'
42      });
43
44      nav.addClass('fixed');
45
46    } else if (win.scrollTop() <= hdHeight - navHeight) {
47
48      nav.css({
49        'top': -navHeight + 'px'
50      });
51
52      condNav.css({
53        'top': -condNavHeight + 'px'
54      });
55
56      nav.removeClass('fixed');
57    }
58  });
59
60  var pageTopPos = parseInt($('#pageTop').css('right'), 10);
61
62  $('#result-nav-cond-box').on('click', function() {
63    if (condNav.css('top') == -condNavHeight + 'px') {
64
65      condNav.css({
66        'top': navHeight + 'px'
67      });
68
69      nav.css({
70        'border-color': '#fff'
71      });
72
73      $('#pageTop').css({
74        'right': -100 + 'px'
75      });
76
77    } else {
78
79      condNav.css({
80        'top': -condNavHeight + 'px'
81      });
82
83      nav.css({
84        'border-color': '#dadada'
85      });
86
87      $('#pageTop').css({
88        'right': pageTopPos + 'px'
89      });
90    }
91  });
92
93  $('#result-nav-cond-close').on('click', function() {
94
95    condNav.css({
96      'top': -condNavHeight + 'px'
97    });
98
99    $('#pageTop').css({
100      'right': pageTopPos + 'px'
101    });
102  });
103
104  // PCでのMAP拡大・縮小
105  var list = $('#result-content-left');
106  var mapWrap = $('#result-content');
107
108  $('#scale-btn').on('click', function() {
109    mapWrap.toggleClass('is-scaleup');
110
111    if (mapWrap.hasClass('is-scaleup')) {
112
113      list.css({
114        'left': -list.outerWidth(true) + 'px'
115      });
116
117    } else {
118
119      list.css({
120        'left': 0 + 'px'
121      });
122    }
123  });
124
125  //スマホでのMAP表示・非表示
126  var target = $('body');
127  var spNav = $('#header-link');
128  var spNavHeight = spNav.height();
129  var mapbtn = $('#map-btn');
130
131  mapbtn.css({
132    'bottom': spNavHeight + 20 + 'px'
133  });
134
135  mapbtn.on('click', function() {
136    target.toggleClass('view-map');
137  });
138
139  if (winWidth <= 1024) {
140    var mapbtn = $('#map-btn');
141    var wrap = $('#wrapper');
142    var wrapInnerHeight = wrap.outerHeight();
143    var leftHeight = $('#result-content-left').height();
144    var wrapPaddingBtm = parseInt(wrap.css('padding-bottom'), 10);
145    var wrapHeight = wrapInnerHeight - wrapPaddingBtm;
146    var fadeHeight = wrapHeight - winHeight;
147
148    if (winHeight < leftHeight) {
149      mapbtn.hide();
150    }
151
152    win.on('scroll', function() {
153      if (
154        $(this).scrollTop() > 50 &&
155        $(this).scrollTop() < fadeHeight
156      ) {
157        mapbtn.fadeIn();
158      } else {
159        mapbtn.fadeOut();
160      }
161    });
162  }
163
164  //マップ固定
165  var right = $('#result-content-right');
166  var map = $('#map');
167  var mapLengh = map.length;
168
169  if (!mapLengh == 0 && winWidth > 1120) {
170    var mapc = $('#map-canvas');
171    var leftHeight = $('#result-content-left').height();
172    var bottomSet = $('.content-bottom').offset();
173    var bottomSetTop = bottomSet.top;
174    var rightMarginTop = parseInt(right.css('margin-top'), 10);
175
176    nav.css({
177      'top': -navHeight
178    }).show();
179
180    mapc.css({
181      'height': winHeight - navHeight + 'px'
182    });
183
184    var mapHeight =
185      winHeight -
186      navHeight -
187      (rightMarginTop * 2);
188
189    if (mapHeight >= leftHeight) {
190      // 左カラムよりマップが大きい場合
191      right.css({
192        'height': mapHeight + 'px'
193      });
194    } else {
195      // 左カラムよりマップが小さい場合
196      right.css({
197        'height': leftHeight + 'px'
198      });
199    }
200
201    win.on('scroll', function() {
202      var render = function() {
203
204        map.css({
205          'height': mapHeight + 'px'
206        });
207
208        if (
209          win.scrollTop() > hdHeight - navHeight &&
210          win.scrollTop() < bottomSetTop - mapHeight - hdHeight
211        ) {
212
213          map
214            .addClass('fixed')
215            .css({
216              'top': navHeight + rightMarginTop + 'px'
217            });
218
219          map.removeClass('absolute');
220
221        } else if (
222          win.scrollTop() >=
223          bottomSetTop - mapHeight - hdHeight
224        ) {
225
226          map
227            .removeClass('fixed')
228            .css({
229              'top': 'auto'
230            });
231
232          map.addClass('absolute');
233
234        } else if (
235          map.hasClass('fixed') ||
236          map.hasClass('absolute')
237        ) {
238
239          map.removeClass('fixed');
240          map.removeClass('absolute');
241        }
242      };
243
244      var refresh = function() {
245        render();
246      };
247
248      refresh();
249    });
250  }
251
252  /*
253   * headerがdisplay:noneの場合の
254   * result-nav補正処理
255   */
256  (function() {
257    var header = $('header[role="banner"]');
258    var resultNav = $('#result-nav');
259    var resultCondNav = $('#result-nav-cond');
260    var ticking = false;

261
262    if (!resultNav.length) {
263      return;
264    }
265
266    function fixResultNavWhenHeaderHidden() {
267      ticking = false;
268
269      var headerIsHidden =
270        !header.length ||
271        header.css('display') === 'none' ||
272        !header.is(':visible');
273
274      /*
275       * headerが表示されている場合は
276       * 既存の処理に任せる
277       */
278      if (!headerIsHidden) {
279        return;
280      }
281
282      var scrollTop = win.scrollTop();
283
284      var currentNavHeight =
285        resultNav.outerHeight() ||
286        navHeight ||
287        0;
288
289      var currentCondNavHeight =
290        resultCondNav.outerHeight() ||
291        0;
292
293      /*
294       * ページ最上部では
295       * ナビを画面外へ戻す
296       */
297      if (scrollTop <= 1) {
298
299        resultNav
300          .removeClass('fixed')
301          .css({
302            'top': -currentNavHeight + 'px',
303            'border-color': ''
304          });
305
306        if (resultCondNav.length) {
307          resultCondNav.css({
308            'top': -currentCondNavHeight + 'px'
309          });
310        }
311
312      } else {
313
314        /*
315         * スクロール時は
316         * 画面上部に固定表示
317         */
318        resultNav
319          .addClass('fixed')
320          .css({
321            'top': '0px',
322            'border-color': '#dadada'
323          });
324      }
325    }
326
327    function requestResultNavFix() {
328      if (ticking) {
329        return;
330      }
331
332      ticking = true;
333
334      /*
335       * 既存のscroll処理が完了した後に
336       * 補正を実行する
337       */
338      window.requestAnimationFrame(
339        fixResultNavWhenHeaderHidden
340      );
341    }
342
343    win.on(
344      'scroll.resultNavHeaderNoneFix',
345      requestResultNavFix
346    );
347
348    // 初期表示時にも補正
349    requestResultNavFix();
350  })();
351
352});