position: stickyでNavbarを固定したい

Navbar をページトップに固定する実装で、position: stickyを使おうとしたところ、思いの外苦戦したためそのメモです。

position: stickyの基本

position: fixedで Navbar をページトップに固定したりすると、その下の要素が画面上部に詰まって隠れてしまうのでmargin-topとかで調整する必要があります。 これをposition: stickyを使うと、margin-topの調整などが不要になります。

Mozilla のサイトでは「Sticky は position: relativeとposition: fixedのハイブリッド」とのこと。

Sticky positioning can be thought of as a hybrid of relative and fixed positioning.
position - CSS: Cascading Style Sheets | MDN

position: stickyが動かない場合

stickyは親要素にoverflowの指定があったりすると、固定が正常に動作しないので注意が必要です。僕はこれになかなか気付かず、かなり時間を消費しました..。

• Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
• Position sticky may not work correctly if any parent element has a set height.
• Many browsers still do not support sticky positioning. Check out which browsers support position: sticky. Creating a sticky sidebar | Webflow University

body {
  overflow: hidden;
}

.navbar {
  /* 固定されない */
  position: sticky;
  top: 0;
  width: 100%;
}

仕事で書いているコードでは画面左右に余白が生じないように、bodyにoverflowを書いていて、これを剥がすとスマホで表示した時に横スクロールが発生したりする状況でした。

また、Bulma を使っている場合だと、Bulmaa がhtml要素のoverflow-x overflow-yに当てているスタイルが干渉することもあるので、更に注意が必要です。
CSS フレームワークとして Bulma を使っている場合には、stickyを使うのは諦めて、fixedを使った Navbar を実装するのが良いでしょう。

Navbar | Bulma: Free, open source, and modern CSS framework based on Flexbox