position: sticky; でプチはまりした

かー、要素をスクロールしたときにくっつけたいなー、でも JavaScript でやんなきゃダメかなー。 って思っていたら、どうやら最近のブラウザでは position: sticky; を使って↓みたいな感じでいけるらしいって聞いたので試してみたらちょっとはまったのでメモ。

.sticky-block {
  position: -webkit-sticky;
  position: sticky;
  top: 0; /* 下に付けたい場合 bottom: 0; とからしい */
}

これだけで動くと思って書いたのに、スクロールすると普通に流れていくしよく分からなかったんだけど、どうやら祖先に overflow: hidden; なやつがいると効かないっぽい。
今回のサイトでも overflow: hidden; が書かれていたので、これのせいで効かずちょっと苦労した。 けどそれさえ分かってしまえば、IE とかで動かない以外に問題がなさそうなので便利っすねこれ。