JavaScript + Ajax 実践サンプル集

スクロールしても常時表示するメニュー

説明補足説明コード分割コードコメント投稿

このサンプルは画面の左上にメニューを表示します。このメニューは画面をスクロールしても常時表示されます。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

外部スクリプトBODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
var timer

window.onload = scrolltop;
window.onunload = stoptimer;

function scrolltop() {
  var menu = document.getElementById('scrollmenu');
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  menu.style.top = scrollTop;
  timer = setTimeout("scrolltop()",10);
}
function stoptimer() {
  clearTimeout(timer)
}

このサンプルは画面の左上にメニューを表示します。このメニューは画面をスクロールしても常時表示されます。

このサンプルを編集して試してみる!

ブラウザの垂直方向のスクロール量は、document.body.scrollTop、document.documentElement.scrollTopなどに格納されています。これらのプロパティの値は、ブラウザの種類とDOCTYPEの指定により異なりますので注意してください。詳細は http://diaspar.jp/node/47 を参照してください。

// 水平スクロール量
var scrollLeft = document.body.scrollLeft ||
                  document.documentElement.scrollLeft;

// 垂直スクロール量
var scrollTop = document.body.scrollTop || 
                  document.documentElement.scrollTop;

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

スクロールしても常時表示するメニュー