【CSS】スクロール時画面を移動しない要素を指定する方法

2020年4月15日2020年4月19日

スクロールしても画面を移動させないようにするCSSクラスの設定方法です。

合わせてある一定の場所まで移動してから固定する方法も！

完全に固定

.fixed
{
  position: fixed;
  bottom: 5px; 
  right: 5px;
  padding: 20px 40px;
}

一定を過ぎたら固定

.fixed
{
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

上から10pxまでの位置までは移動して10pxに達すると固定になります