226
回編集
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
編集の要約なし タグ: 差し戻し済み モバイル編集 モバイルウェブ編集 |
||
48行目: | 48行目: | ||
/* メニューバー */ | /* メニューバー */ | ||
/ | // メニューバー | ||
var lastScrollTop = 0; | var lastScrollTop = 0; | ||
var menuBar = document.getElementById("mobileMenuBar"); | var menuBar = document.getElementById("mobileMenuBar"); | ||
var headerMenu = document.querySelector(".header-container.header-chrome"); // 本来のheadermenu | |||
// 初期状態でmobileMenuBarを非表示にする | |||
menuBar.style.display = 'none'; | |||
window.addEventListener("scroll", function(){ | window.addEventListener("scroll", function() { | ||
var currentScroll = window.pageYOffset || document.documentElement.scrollTop; | |||
// headerMenuが画面から消えたかどうかをチェック | |||
var headerMenuBottom = headerMenu.offsetTop + headerMenu.offsetHeight; | |||
var isHeaderMenuVisible = headerMenuBottom > currentScroll; | |||
if (!isHeaderMenuVisible) { | |||
// headerMenuが見えなくなったらmobileMenuBarを表示 | |||
menuBar.style.display = 'block'; | |||
menuBar.style.position = 'fixed'; | |||
menuBar.style.top = '0px'; | |||
} else { | |||
// headerMenuが見える場合はmobileMenuBarを非表示 | |||
menuBar.style.display = 'none'; | |||
} | |||
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; | |||
}, false); | }, false); | ||