スクロールしたら追従セクションを表示
700pxスクロールしたら表示、特定のセクションに到達したら非表示
| 追加可能パーツ | 変更可能箇所 | 複数設置 | ページ複製・ クリップボード使用可否 |
|---|---|---|---|
|
セクションに入れられる範囲 |
JS変更箇所
|
× | 〇 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：カラム数や中に入れるパーツが多いと、レスポンシブ調整で崩れる可能性が高いです。~3カラムくらいに収める事を推奨します。 ※①デフォルトは700pxスクロールしたら表示されます。 |
デモ
700pxスクロールしたら追従セクションが表示され、
クラス名「js-stop_sec」が付与されたセクションに到達したら非表示になります。
ご不明な点はお気軽に
お問い合わせください
テキストが入ります。
ご不明な点はお気軽に
お問い合わせください
ご不明な点はお気軽に
お問い合わせください
構造図
デモのパーツの構造を説明しています。
設定方法
-
CSSをカスタムCSSに記述。
-
編集画面用CSSをカスタムCSSに記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
-
クラス名を見本とあわせる。
- 追従用セクションを新規作成し、クラス名「js-fixed_sec fixed_sec」を追加。デザインに合わせてパーツを配置します。
※必要に応じて、デフォルトで用意しているスタイル調整用のクラス名「fixed_btn_row」を追加。
※複数ページで同パーツを配置する場合は、共通パーツ作成をおすすめします。（別途CSS調整は各自でお願いします） - 追従セクションを非表示にしたいタイミングに置くセクションにクラス名「js-stop_sec」を追加。
- スタイルやアニメーション等は適宜カスタムCSSで変更してください。
-
新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
rowは新規で作成した方がCSSの影響を受けないので安心かと思います。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-30更新（v1.0.0）
<script>
/* -------------------------------
スクロールしたら追従セクションを表示 v1.0.0
------------------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const scroll_open = 700; /* 表示させたい位置を変更可能（px単位） */
/*------------- 変数定義 【変更可能】 END -------------*/
const fixedSec = document.querySelector('.js-fixed_sec'); /* スクロール追従対象（セクション） */
const stopSec = document.querySelector('.js-stop_sec'); /* 非表示になるタイミングを指定（セクション） */
if (fixedSec) {
/* スクロールするたびに実行 */
window.addEventListener('scroll', function () {
let scroll = window.pageYOffset; /* windowのスクロール位置を取得 */
/* 700pxスクロールしたら表示 */
if (scroll > scroll_open) {
fixedSec.classList.add('-visible'); /* CSS付与・アニメーション付与などに使用 */
} else {
/* 700pxに達してない場合は非表示 */
fixedSec.classList.remove('-visible');
}
/* 非表示タイミングに指定したセクションがあった場合、スクロール追従対象セクションの下部分が該当セクションに達したら非表示 */
if (stopSec && fixedSec.getBoundingClientRect().bottom > stopSec.getBoundingClientRect().top) {
fixedSec.classList.remove('-visible');
}
});
}
});
/* -------------------------------
スクロールしたら追従セクションを表示 END
------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-09-08更新（v1.0.0）
/*-- スクロールしたら追従セクションを表示 START v1.0.0--*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
// JSでコントロールするスタイル
&.js-fixed_sec {
//非表示（デフォルト）
opacity: 0;
pointer-events: none;
transition: .2s all;
//表示（300pxスクロール後）
&.-visible {
opacity: 1;
pointer-events: auto;
}
}
// セクションのデザインを当てるスタイル
&.fixed_sec {
position: fixed;
right: 0;
left: 0;
bottom: 0;
z-index: 1000;
background-color: rgba(243,243,243,.8);
margin: 0 auto;
padding: 0;
.inner {
@include breakpoint-sp {
padding: 0 15px;
}
.row {
&.fixed_btn_row {
@include breakpoint-sp {
display: flex;
flex-wrap: wrap;
}
.col {
padding-bottom: 0;
&:not(:first-child) {
@include breakpoint-sp {
width: 50% !important;
}
}
.component {
&.richtext {
@include breakpoint-sp {
font-size: 12px;
}
}
&.button {
.button-cont {
a {
@include breakpoint-pc {
width: 100%;
min-width: initial;
max-width: 280px;
}
@include breakpoint-ssp {
font-size: 12px;
}
}
}
}
}
}
}
}
}
}
}
}
/*-- スクロールしたら追従セクションを表示 END --*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2024-09-17更新（v1.0.0）
/*-- スクロールしたら追従セクションを表示 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.js-fixed_sec {
opacity: 1;
pointer-events: auto;
transition: none;
}
&.fixed_sec {
position: relative;
right: initial;
left: initial;
bottom: initial;
z-index: initial;
border: 1px solid red;
&::before {
content: "画面下に追従するセクション";
position: absolute;
color: #fff;
background: red;
right: 0;
top: 0;
padding: 0 5px;
}
}
}
/*-- スクロールしたら追従セクションを表示 編集画面用 END --*/
※ここに到達すると追従カラムが非表示になります
セクション「js-stop_sec」
© Basic Inc. All Rights Reserved.