【javascript】jQueryを利用して要素の位置を固定する

jQuery: 2.1.4

jQueryを利用して要素の位置を固定させる方法を紹介します。

画面上に常に表示させ続けたいメニュー等に利用できます。

出来る限り簡単に実装できるようにサンプルを作成してみたので、とりあえず動かしながら応用していけるかと思います。

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(function() {
			//最初に現在位置を取得
			var initial_offset = $('#f-div').offset().top;
			//ウィンドウがスクロールしたら要素を移動させる
			$(window).scroll(function() {
				var offset = initial_offset + $(document).scrollTop();
				$('#f-div').animate({ top: offset }, { duration: 'slow', queue: false });
		});
	</script>
</head>
<body>
	<div id="f-div" style="position:absolute;">
	あいうえお
	</div>
</body>
</html>

<html>

<head>

$(function() {

//最初に現在位置を取得

var initial_offset = $('#f-div').offset().top;

//ウィンドウがスクロールしたら要素を移動させる

$(window).scroll(function() {

var offset = initial_offset + $(document).scrollTop();

$('#f-div').animate({ top: offset }, { duration: 'slow', queue: false });

});

</script>

</head>

<body>

あいうえお

</div>

</body>

</html>

実際の動きはこちらから確認できます。
sample_20170407.html

サンプルはこちらからダウンロードできます。
sample_20170407.zip

この記事は役に立ちましたか？

役に立った (0)
もっと詳しい情報が必要 (0)
情報が古かった (0)
目的の情報では無かった (0)