横浜のITサポート・WEB制作会社

Webサイト制作

WordPressの使い方を知りたい!

Windows

パソコンのトラブル解決方法を知りたい!

Office365

Office365でできることを知りたい!

アプリ

便利なアプリを知りたい!

h

すべての記事

人気記事TOP15

タグ一覧

会社情報

採用情報

お問い合わせ

ITサポートスタッフ募集中です。詳しくはこちらから!

CSSのposition:stickyでサイドバーを固定しスクロール追従させる方法

2022/03/01 | WEBデザイン

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!

こんにちは。

CSS「position: sticky;」でサイドバーを固定しスクロール追従させる方法をご紹介します。

スクロール追従する固定サイドバーの完成イメージ

CSSで画面をスクロールしても位置が固定されているサイドバーを持つ、2カラムレイアウトのページです。

ピンク色の部分がスクロール追従する固定サイドバーでに位置します。

サンプルコード

「position: sticky;」で上から50pxの場所に.side_contentを固定しています。

2カラムレイアウトは「display: grid;」で3:1にしました。

<head>
	<style>
		.wrap {
			display: grid;
			grid-template-columns: 3fr 1fr;
		}
		.main_content {
			background: #e0efff;
		}
		.side {
			background: #e0ffe0;
		}
		.side_content {
			position: sticky;
			top: 50px;
			background: #ffe0ff;
		}
	</style>
</head>
<body>
	<header>
		<p>header</p>
	</header>
	<div class="wrap">
		<div class="main">
			<div class="main_content">
				<h2>main</h2>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
			</div>
		</div>
		<div class="side">
			<div class="side_content">
				<h2>side</h2>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
				<p>xxxxxx</p>
			</div>
		</div>
	</div>
	<footer>
		<p>footer</p>
	</footer>
</body>

なお、スクロール追従で特定に位置に固定させる要素の親要素に高さがない場合は、「position: sticky;」が効かないようなので注意が必要です。

また、こちらではDiviの機能を使いノーコードで固定サイドバーを作る方法をご紹介しています。

ITサポート・ホームページ制作はお任せください

  • パソコンの動作が遅い・重いと感じる
  • パソコンやスマートフォン、複合機などIT機器を新しく入れ替えたい
  • システム化・クラウド化など業務のIT化・DX化を考えている
  • ホームページを新しく作りたい
  • 古くなったホームページを修正をしてほしい

上記の様なお悩みがありましたらぜひ弊社までお気軽にお問い合わせください!