画面スクロールしても常駐してくれるstickyが楽しかったので

Blog Admin

スクロールしても常駐してくれるボタンを設置したい！
ということで、CSSでのstickyを利用したイメージ設置の話です。

スクロール追従
position: sticky;

このサイトではありませんが、別のところで最近使ったところ評判がよかったので。
ボタンを常駐させる見せ方はよくある話ですが、実装となると、自力で実践ということでもなかったようです。CTAとしては強力な気がしています。

div といっしょに使いましょう。
しっかり区画整理されたレイアウトであれば、かなり効果的な使い方が可能です。

これです
実装方法
トップに戻るボタンとの違い

これです

以下のエリア内の色付き部分の動きの話です。

sticky 01

sticky 02

コードは要素だけにしていますので、実装とは異なりますが。
やったことはこういうことです。

モバイル広告と戦ってしまうかもしれません。
課題ですね。
うまく共存する道がありそうではあるのですが。。

実装方法

実際に書いたコードと、ちょっとした注意点です。
あとは実践で分かると思いますので。

開発者ツールを使って、いろいろと調整してみてください。

親要素に対して位置指定して軽く固定するイメージです。
position: fixed; とは異なり、上と左との位置指定です。
bottomのような指定のアイデアとしては、計算させるとか、jQueryで調整するとかいったことがあります。必要に応じて、サイトに合った方法を使ってくださいね。

書いたコード

上の方で例示した部分のコードそのままです。
念のためにidで指定しましたが、classでもよいのです。

今回のポイントは、cssの position: sticky; です。

HTML

<div id="post35702-area01">
	<div class="sticky-item-1">
		<p class="item-text">sticky 01</p>
	</div>
	<div class="sticky-item-2">
		<img src="https://wnkhs.net/wp-content/uploads/2023/10/stickies-003-150x150.png" class="item-img" alt="">
		<p class="item-text">sticky 02</p>
	</div>
</div>

CSS

#post35702-area01 {
	background-color: #eee;
	width: 100%;
	height: 500px;
}

.sticky-item-1 {
	position: sticky;
	background-color: #ccf;
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
}

.sticky-item-2 {
	position: sticky;
	background-color: #fcc;
	width: 100%;
	height: 40px;
	top:  100px;
	left: 0;
}

.item-text {
	font-weight: 600;
	text-align: center;
}
.item-img {
	float: right;
	border: none;
	width: 100px;
	height: 100px;
}

top と left の指定をお忘れなく

高さや幅は調整いただくとして。
とにかく、エリアの上端と左端を指定することになります。

指定した際の動きは例示のとおりです。
エリア内でどこに粘着するかということです。
上下にスクロールして動きを確認してください。

足元のほうにもっていきたい？

bottom指定はできませんので、topからの位置を計算する必要があります。
たとえば以下のようなやり方はいかがでしょうか。

.sticky-item-2 {
	position: sticky;
	background-color: #fcc;
	width: 100%;
	height: 40px;
	top: calc(100% - 150px);
	left: 0;
}

上記の6行目の部分で、「最下部から150px上」という計算を入れています。
上端指定です。
例では画像の高さ（height）が100pxですので、エリア下端から50px空けて画像の下端という計算です。

トップに戻るボタンとの違い

当ページの右下には、トップに戻るボタンが表示されると思います。
これは、利用中のテーマの機能を使っているので、自分でコードを描いたわけではないのですが。。

ソースを確認すると、 position: fixed; で右下に固定しています。
絶対位置指定で、bottom と right を使えます。
表示が遅れてくるのはまた別の設定です。

fixed のほうは、親要素側で当該要素の高さが意識されないので、独立した動きになります。
stickyは高さを持ちます。位置調整にはご注意ください。

CSS