JavaScriptで、メニューが縦スクロールで上まで来ても、隠れることなく固定表示させるサンプル。
jQueryを使って作る方法については、「jQueryを使い、メニューが縦スクロールで上まで来たら固定表示させる方法」のページへ。
実装例
実装例は、サンプルページにて。
実装例（サンプルページ）の動作について
サンプルページを縦スクロールし、「メニュー用のボックス要素」というテキストがある黒色のボックス要素が上まで来たら、隠れることなく固定される。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $globalMenu = document.getElementById( 'globalMenu' );
window.onscroll = function(){
if( window.pageYOffset > 70 ) {
$globalMenu.setAttribute( 'class', 'fixedGlobalMenu' );
$globalMenu.innerHTML = $offsetTop;
} else {
$globalMenu.setAttribute( 'class', '' );
$globalMenu.innerHTML = $offsetTop;
}
}
}
</script>
window.onload = function(){
var $globalMenu = document.getElementById( 'globalMenu' );
window.onscroll = function(){
if( window.pageYOffset > 70 ) {
$globalMenu.setAttribute( 'class', 'fixedGlobalMenu' );
$globalMenu.innerHTML = $offsetTop;
} else {
$globalMenu.setAttribute( 'class', '' );
$globalMenu.innerHTML = $offsetTop;
}
}
}
</script>
id属性が「globalMenu」である要素が上まで来たら、その要素のclass属性に「fixedGlobalMenu」を追加する。
戻りは、class属性から「fixedGlobalMenu」を削除することで実現している。
HTML
固定表示させるメニュー用のボックス要素のHTML。
<div id="header">
<div id="headerTitle">
<h1>サンプルページ</h1>
</div>
<div id="globalMenu">
メニュー用のボックス要素
</div>
</div>
<div id="headerTitle">
<h1>サンプルページ</h1>
</div>
<div id="globalMenu">
メニュー用のボックス要素
</div>
</div>
CSS
#globalMenu {
width: 930px;
background-color: black;
color: white;
}
.fixedGlobalMenu {
position: fixed;
top: 0px;
}
#header {
height: 84px;
}
#headerTitle {
margin: 0 auto;
padding: 10px;
background-color: #bf7fff;
}
#headerTitle h1 {
margin: 0 auto;
padding: 0;
background-color: #bf7fff;
}
width: 930px;
background-color: black;
color: white;
}
.fixedGlobalMenu {
position: fixed;
top: 0px;
}
#header {
height: 84px;
}
#headerTitle {
margin: 0 auto;
padding: 10px;
background-color: #bf7fff;
}
#headerTitle h1 {
margin: 0 auto;
padding: 0;
background-color: #bf7fff;
}