226
回編集
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
||
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'; | |||
} | |||
}); | |||
}); | }); |