JavaScriptで、サイドメニューやウィジェットなど特定のボックス要素が、縦スクロールで上まで来ても、隠れることなく固定表示させるサンプル。
jQueryを使って作る方法については、「jQueryを使い、特定の要素が縦スクロールで上まで来たら固定表示させる方法」のページへ。
実装例
実装例は、サンプルページにて。
実装例（サンプルページ）の動作について
サンプルページを縦スクロールし、「このボックス要素を固定。 」というテキストがある黄色のボックス要素が上まで来たら、隠れることなく固定される。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function(){
var $lastWidget = document.getElementById( 'lastWidget' );
var $distanceFromTheTop = $lastWidget.getBoundingClientRect().top + window.pageYOffset;
window.onscroll = function(){
if( window.pageYOffset > $distanceFromTheTop ) {
$lastWidget.setAttribute( 'class', 'fixedWidget' );
} else {
$lastWidget.setAttribute( 'class', '' );
}
}
}
</script>
window.onload = function(){
var $lastWidget = document.getElementById( 'lastWidget' );
var $distanceFromTheTop = $lastWidget.getBoundingClientRect().top + window.pageYOffset;
window.onscroll = function(){
if( window.pageYOffset > $distanceFromTheTop ) {
$lastWidget.setAttribute( 'class', 'fixedWidget' );
} else {
$lastWidget.setAttribute( 'class', '' );
}
}
}
</script>
id属性が「lastWidget」である要素が上まで来たら、その要素のclass属性に「fixedWidget」を追加する。
戻りは、class属性から「fixedWidget」を削除することで実現している。
HTML
固定表示させるボックス要素のHTML。
<div id="lastWidget">
このボックス要素<br />を固定。
</div>
このボックス要素<br />を固定。
</div>
CSS
<style>
#lastWidget {
width: 160px;
background-color: #ffff00
}
.fixedWidget {
position: fixed;
top: 0px;
}
</style>
#lastWidget {
width: 160px;
background-color: #ffff00
}
.fixedWidget {
position: fixed;
top: 0px;
}
</style>