[ 固定ブロック ] スクロール時にボタンを画面の右か左に固定して表示したい

[kurudrive]

対象ブロック

• 横並びボタン
• Buttons

スタイル実装参考

とりあえずカスタムブロックスタイルで実装する

https://patterns.vektor-inc.co.jp/wp-admin/post.php?post=13609&action=edit

selector{
  transform: translateY(0);
}
/*ボタン*/
selector .vk_button_link.btn{
border-radius: 0 0 5px 5px;
padding:0.375rem 0.875rem;
}
/*電話番号余白*/
selector .vkp_header-top-tel {
margin-right:10px;
}
/*ここからスクロール時*/
/*縦ボタン*/
.scrolled  selector .vk_button_link.btn{
  min-width: fit-content;
width: fit-content;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    border-radius: .25rem 0 0 .25rem;
padding:0.875rem 0.375rem;
}
/*アイコン余白*/
.scrolled  selector .vk_button_link.btn .vk_button_link_before{
margin-right:0;
margin-bottom:0.5rem;
}

/*固定位置右付け*/
.scrolled selector{
z-index:10;
flex-direction: column;
position: fixed;
left: calc(100% - 35.5px);
top: 5vh;
transform: translateY(10px);
animation-name: scroll-anime;
animation-timeline: scroll();
}

@keyframes scroll-anime {
  0% {
    opacity: 0;
 transform: translateY(0);
  }
  20% {
    opacity: 1;
 transform: translateY(20px);
  }
  100% {
    opacity: 1;
  }
}


/*電話番号非表示*/
.scrolled selector .vkp_header-top-tel {
display:none;
}

スクロール識別用のクラスを body に出力する

• Lightning や X-T9 のクスロールクラスと被らない名前にする ( vk-blocks_scrolled )

[goutetsuguma]

忘れないうちにcssのメモ

left: calc(100% - 35.5px);

なぜ right:0; ではないのかというと、safariやfirefoxで見ると、スクロールバーの下にボタンが隠れてしまうため、ボタンの幅分35.5px引いている。ボタンの余白によってこの幅は変わってしまうので、その辺りのjsが必要になるのかもしれない

それかright:0; でスクロールバー分をmargin-left や margin-right でずらしてCSSハックで、safari 、firefoxのCSSをそれぞれ書くか。。。

[kurudrive]

高度な設定を考えるとキリがないので、位置の変化によるデザインの変更は個別にCSSを書く

スクロールしたら固定されるブロック

• スクロールしたら固定
• 固定位置（左右）
• 固定位置（上からの距離）

発動条件は自分が表示領域から消えたら。。。

[kurudrive]

常に固定ブロック

• 最初から表示 / スクロールされたら表示
  • スクロールされたら表示 -> 表示開始距離指定（距離指定機能は追加実装で可）
• 位置
  • 上 / 右 / 下 / 左