スマホのアドレスバーを考慮していい感じにする

要素をある位置で固定したい時、脳死でtop: calc(100vh - 配置したい位置px);などを指定。
しかし、デスクトップではうまいこと表示されるものの
スマホで上スクロールした際、出現したsafariのアドレスバーにより消えてしまう事態があり、少し悩んだので備忘。

cssで100vhを指定すると、アドレスバーの高さは考慮されない

     .float-nav {
       position: sticky;
       top: calc(100vh - 100px);
     }

アドレスバーを考慮した高さを取得するにはwindow.Heightを使用する。

      const windowHeight = window.innerHeight;
      const floatNav = document.getElementById('固定したい要素');

      floatNav.style.top = windowHeight - 100 + 'px';