「MediaWiki:Mobile.js」の版間の差分
提供:パルワールド 攻略Wiki
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
||
28行目: | 28行目: | ||
/* | /*カスタムメニューバーの内容*/ | ||
document.addEventListener("DOMContentLoaded", function() { | document.addEventListener("DOMContentLoaded", function() { | ||
// #content要素を取得 | // #content要素を取得 | ||
76行目: | 76行目: | ||
contentElement.appendChild(newDiv); | contentElement.appendChild(newDiv); | ||
} | } | ||
}); | |||
/*カスタムメニューバーの設定*/ | |||
document.addEventListener("DOMContentLoaded", function() { | |||
// 初期状態ではmobileMenuBarを非表示に設定 | |||
var mobileMenuBar = document.getElementById('mobileMenuBar'); | |||
mobileMenuBar.style.display = 'none'; | |||
// スクロールイベントリスナー | |||
window.addEventListener('scroll', function() { | |||
// モバイルデバイスでの表示をチェック(例:幅が768px以下) | |||
if (window.innerWidth <= 768) { | |||
// ページの最上部からのスクロール距離を取得 | |||
var scrollDistance = window.scrollY; | |||
if (scrollDistance > 100) { | |||
// 100px以上スクロールした場合、mobileMenuBarを表示 | |||
mobileMenuBar.style.display = 'block'; | |||
} else { | |||
// 100px未満に戻った場合、mobileMenuBarを非表示 | |||
mobileMenuBar.style.display = 'none'; | |||
} | |||
} else { | |||
// モバイルデバイスでない場合、常に非表示 | |||
mobileMenuBar.style.display = 'none'; | |||
} | |||
}); | |||
// ウィンドウのサイズ変更時にもチェック | |||
window.addEventListener('resize', function() { | |||
if (window.innerWidth > 768) { | |||
mobileMenuBar.style.display = 'none'; | |||
} | |||
}); | |||
}); | }); |
2024年1月15日 (月) 23:32時点における版
//トップに戻るボタン
$(document).ready(function() {
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();
}, 2000);
}
$(window).scroll(resetInactivityTimer);
$(window).mousemove(resetInactivityTimer);
resetInactivityTimer();
});
/*カスタムメニューバーの内容*/
document.addEventListener("DOMContentLoaded", function() {
// #content要素を取得
var contentElement = document.querySelector("#content");
// 新しいdiv要素を作成
var newDiv = document.createElement("div");
newDiv.id = "mobileMenuBar";
newDiv.className = "fadeIn";
newDiv.style.display = "none";
newDiv.style.position = "fixed";
newDiv.style.top = "0px";
// ul要素を作成
var ul = document.createElement("ul");
ul.className = "gNav-menu";
// 各li要素を作成
var li1 = document.createElement("li");
var a1 = document.createElement("a");
a1.href = "./";
a1.textContent = "TOP";
li1.appendChild(a1);
var li2 = document.createElement("li");
var a2 = document.createElement("a");
a2.href = "./RightMenu";
a2.textContent = "攻略メニュー";
li2.appendChild(a2);
var li3 = document.createElement("li");
var a3 = document.createElement("a");
a3.href = ".//フォーラム";
a3.textContent = "コミュニティ";
li3.appendChild(a3);
// li要素をulに追加
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
// ulをdivに追加
newDiv.appendChild(ul);
// divをcontentElementに追加
if (contentElement) {
contentElement.appendChild(newDiv);
}
});
/*カスタムメニューバーの設定*/
document.addEventListener("DOMContentLoaded", function() {
// 初期状態ではmobileMenuBarを非表示に設定
var mobileMenuBar = document.getElementById('mobileMenuBar');
mobileMenuBar.style.display = 'none';
// スクロールイベントリスナー
window.addEventListener('scroll', function() {
// モバイルデバイスでの表示をチェック(例:幅が768px以下)
if (window.innerWidth <= 768) {
// ページの最上部からのスクロール距離を取得
var scrollDistance = window.scrollY;
if (scrollDistance > 100) {
// 100px以上スクロールした場合、mobileMenuBarを表示
mobileMenuBar.style.display = 'block';
} else {
// 100px未満に戻った場合、mobileMenuBarを非表示
mobileMenuBar.style.display = 'none';
}
} else {
// モバイルデバイスでない場合、常に非表示
mobileMenuBar.style.display = 'none';
}
});
// ウィンドウのサイズ変更時にもチェック
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
mobileMenuBar.style.display = 'none';
}
});
});