MediaWiki:Mobile.js

/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */
/* ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します */


// HTMLコンテンツを変数に格納
var htmlContent = `
<div id="mobileMenuBar" class="fadeIn" style="display: block; position: fixed; top: 0px;">
    <ul class="gNav-menu">
        <li><a class="mw-selflink selflink">TOP</a></li>
        <li><a href="/RightMenu">攻略メニュー</a></li>
        <li><a href="/フォーラム">コミュニティ</a></li>
    </ul>
</div>`;

// #content要素を選択
var contentElement = document.querySelector('#content');

// HTMLコンテンツをcontentElementに追加
contentElement.innerHTML = htmlContent;


/*メニューバー*/
/*メニューバー*/
var lastScrollTop = 0;
var menuBar = document.getElementById("mobileMenuBar");


window.addEventListener("scroll", function(){
   var currentScroll = window.pageYOffset || document.documentElement.scrollTop;

   if (currentScroll > lastScrollTop){
       // 下にスクロールしているとき
       if (currentScroll > 100) {
       menuBar.style.display = 'block';
       menuBar.style.position = 'fixed'; // スクロール時には固定
       menuBar.style.top = '0px';
       }
   } else {
       // 上にスクロールしているとき
       if (currentScroll <= 0) {
           // ページの一番上にいるとき
           menuBar.style.display = 'none';
       } else if (currentScroll > 100) {
           menuBar.style.display = 'block';
           menuBar.style.position = 'fixed'; // スクロール時には固定
           menuBar.style.top = '0px';
       }
   }
   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // ネガティブな値を防ぐ
}, false);
// TOPへ

$(document).ready(function() {
    // FontAwesomeアイコンを使用してボタンを作成
    var backToTopButton = $('<div/>', {
        id: 'back-to-top',
        html: '<i class="fa-solid fa-chevron-up"></i>',
        click: function() {
            window.scrollTo(0, 0);
        }
    }).appendTo('body');

    // ボタンをすぐに表示
    backToTopButton.show();

    // 非アクティブタイマーを管理する変数
    var inactivityTimer;

    // スクロールやマウス動作でタイマーをリセットする関数
    function resetInactivityTimer() {
        backToTopButton.show(); // スクロール時にボタンを表示
        clearTimeout(inactivityTimer); // タイマーをリセット
        inactivityTimer = setTimeout(function() {
            backToTopButton.fadeOut(); // 2秒間非アクティブ状態で非表示にする
        }, 2000); // 2000ミリ秒 = 2秒
    }

    // スクロールとマウス動作でタイマーをリセット
    $(window).scroll(resetInactivityTimer);
    $(window).mousemove(resetInactivityTimer);

    // 初期タイマー設定
    resetInactivityTimer();
});