https://kuramore.jp/assets/common/js/follow-banner.js

1$(function () {
2  if (window.util.isSP) {
3    var scrollStart = $('.footer').offset().top; //ページ上部からの距離を取得
4    var distance = 0;
5
6    $(window).scroll(function(){
7      distance = $(this).scrollTop(); //スクロールした距離を取得
8      if (scrollStart <= distance) { 
9        $('.js-menu-wrapper .js-menu-inner').fadeOut();
10      } else {
11        $('.js-menu-wrapper .js-menu-inner').fadeIn();
12      }
13    });
14  } else {
15    var relatedArticleHeight = $('.mod-related_wrapper').offset().top + $('.mod-related_wrapper').outerHeight();
16    var scrollBannerButtonViewHeight = $('.article-detail_mvRight .trend-CTA-wrapper').offset().top + $('.article-detail_mvRight .trend-CTA-wrapper').outerHeight();
17    $(window).scroll(function(){
18      if ($(window).scrollTop() > scrollBannerButtonViewHeight && $(window).scrollTop() + $(window).height() <= relatedArticleHeight) {
19        $('.js-menu-wrapper .js-menu-inner').fadeIn();
20      } else {
21        $('.js-menu-wrapper .js-menu-inner').fadeOut();
22      }
23    });
24  }
25
26// ポップアップを一度表示したかどうか（画面更新されたらリセットされる）
27var showBreakAwayModalFlg = true;
28// ポップアップ閉じる処理
29$('.js-article-modal .js-close , .popup-overlay').click(function () {
30  $('.popup-overlay, .js-article-modal').fadeOut(500, function () {
31    // モーダル閉じた時はbodyをスクロールできるようにする処理
32    $('body').removeClass('fixed').css({
33      'top': ''
34    });
35    var scrollData = $('html').data('scroll');
36    // スクロール位置を保持した状態にする
37    $("html,body").scrollTop(scrollData);
38    $('html').removeData('scroll');
39    return false;
40  });
41});
42// 画面読み込み後の処理
43window.onload = () => {
44  if (window.util.isSP) {
45    // 戻るボタンを押下された時
46		history.pushState(null, null, null);
47		window.addEventListener('popstate', function () {
48			if (showBreakAwayModalFlg) {
49				showBreakAwayModalFlg = false;
50				$('.popup-overlay , .js-article-modal').fadeIn();
51			}
52		});
53	} else {
54    // マウスカーソルが外れた場合
55		document.body.addEventListener('mouseleave', (e) => {
56			if (e.clientY <= 0 && showBreakAwayModalFlg) {
57				showBreakAwayModalFlg = false;
58				$('.popup-overlay , .js-article-modal').fadeIn();
59			}
60		});
61	}
62 }
63
64  // all.min.jsのクリックイベント削除
65  $('a[href^="#"]').off('click');
66  // lazyload対応スムーススクロール処理
67  const getTargetPositionY = ($this) => {
68    const href = $this.attr('href');
69    const target = $(href == '#' || href == '' ? 'html' : href);
70  
71    return Math.trunc(target.offset().top);
72  }
73  
74  const scrollAnimate = ($this, positionStart, scrollSpeed) => {
75    $('html').animate({ scrollTop: positionStart }, scrollSpeed, 'swing', () => {
76      const positionEnd = getTargetPositionY($this);
77  
78      // 現在スクロール位置が到達していない場合、再度スクロール
79      // 永続ループ回避のため、現在スクロール位置取得時のみ切り上げ
80      const currentPosition = Math.ceil($(window).scrollTop());
81      
82      if (currentPosition < positionEnd) {
83        scrollAnimate($this, positionEnd, 100);
84      }
85    });
86  };
87
88  $('a[href^="#"]').click(function() {
89    const positionStart = getTargetPositionY($(this));
90    scrollAnimate($(this), positionStart, 500);
91  
92    return false;
93  });
94
95// スクロールしたらマーカー引かれる処理
96var artucle_marker = document.querySelectorAll(".js-marker");
97document.addEventListener("scroll", ()=>{
98  for (let i = 0; i < artucle_marker.length; i++) {
99    var element = artucle_marker[i];
100    var distance = element.getBoundingClientRect().top;
101    if(distance < window.innerHeight * .8){
102      element.classList.add("active");
103    }
104  }
105})
106
107});