ページ上に要素を固定して表示する

Web ページ上に、要素を固定して表示する方法を紹介します。このページで紹介する方法では、jQuery を使います。

CSS の設定

画面上に固定するためには、css の position を fixed に設定します。位置などは、top と left で設定します。

.fixed-box
{
    position: fixed;
	top: 10px;
	left: 10px;
}

JavaScript から位置を操作する

JavaScript から位置を操作する場合、スタイルの top と left を設定します。

var p = {x: 10, y:10 };
$("#fixed-box-id").css({
	"top": p.x + "px",
	"left": p.y + "px"
});

offset で設定すると…うまくいかない？

offset メソッドで位置を設定した場合、ドキュメントのスクロールバーが移動した状態では変な位置に設定されてしまいました。おそらく、スクロール位置を考慮して設定する必要があるのだと思いますが、複雑化することと意図しない動作が起きるため、スタイル指定をした方が良さそうです。

目次

アウトライン