スクロール時にコンテンツを半固定する動作を実装したカスタマイズ例
パソコンまたはタブレットでこのページをスクロールしてご覧ください。
以下の春夏秋冬のそれぞれのブロックのコンテンツがスクロール中に画面中央でいったん固定されて、次の季節のコンテンツが見えてくるとまた上に移動し始める動きをします。
スマホでは背景画像のみが固定で、コンテンツはふつうにスクロールします。
CSS の position: sticky;
を使っています。このプロパティはお手軽で便利ですが、意外と知られていない(使われていない)みたいです。
この実装例のようにコンテンツの動きに変化を持たせるために使うこともできますし、フローティングバナーとしても活用できます。
春
春はあけぼの
やうやう白くなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。
夏
夏は夜
月のころはさらなり。やみもなほ、蛍の多く飛びちがひたる。また、 ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。
秋
秋は夕暮れ
夕日のさして山の端いと近うなりたるに、烏の寝どころへ行く とて、三つ四つ、二つ三つなど、飛びいそぐさへあはれなり。まいて雁などの つらねたるが、いと小さく見ゆるはいとをかし。日入りはてて、風の音、虫の音など、はたいふべきにあらず。
冬
冬はつとめて
夕日のさして山の端いと近うなりたるに、烏の寝どころへ行く とて、三つ四つ、二つ三つなど、飛びいそぐさへあはれなり。まいて雁などの つらねたるが、いと小さく見ゆるはいとをかし。日入りはてて、風の音、虫の音など、はたいふべきにあらず。
関連記事
弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズできます。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

@media (min-width:782px) {
body {
overflow-x: unset;
}
.vk_outer {
overflow: unset;
}
div.fix-this-sticky {
position: -webkit-sticky;
position: sticky;
top: 50vh;
transform: translate(0, -50%);
}
.last-spacer .vk_block-margin-lg--height {
height: 50vh;
}
}
.fix-this-sticky .wp-block-group.shift-frame-1 {
padding: 0.5em;
margin: 0 auto;
max-width: 120px;
}
.fix-this-sticky p.season {
display: flex;
justify-content: center;
align-items: center;
width: 1.5em;
height: 1.5em;
font-size: 3.5em;
padding: 0;
margin: 0 auto;
}
.fix-this-sticky .wp-block-group.shift-frame-1 {
box-shadow: none;
}
.fix-this-sticky .wp-block-group.shift-frame-1:after {
box-shadow: none;
z-index: -1;
}
.fix-this-sticky .wp-block-group.shift-frame-1.spring:after {
background-color: #fde2d7;
}
.fix-this-sticky .wp-block-group.shift-frame-1.summer:after {
background-color: #6adffc;
}
.fix-this-sticky .wp-block-group.shift-frame-1.autumn:after {
background-color: #fcba3f;
}
.fix-this-sticky .wp-block-group.shift-frame-1.winter:after {
background-color: #f3f3f3;
}
html にまで overflow-x: unset;
を指定すると、Chrome / Edge の場合、横スクロールバーが表示されてしまう。
サイト運営者プロフィール

- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2025年2月1日スターターパックのアコーディオンのデザインを追加しました
WordPress2025年1月17日スターターパックのモバイルナビのデザインを2つ追加しました
WordPress2024年12月25日WordPress コアの詳細ブロックで作った排他的に開閉するアコーディオン
WordPress2024年12月14日VK Blocks Pro で投稿リストのカルーセル表示が超かんたんになった

Lightning テーマ使用
中小企業様、個人事業主様向け
最適なホームページ
を制作いたします
制作費用 | クオリティを落とさずに 価格を抑えたサイトを制作します |
必要十分 | お問い合わせフォーム、新着情報など 必要なものが最初から揃っています |
サポート | 1年間のサポートがついて安心 初めてでもホームページを活用できます |