ヘッダーメニューを固定する
> 2021/5/5 標準で固定されるようになったので、このUserCSSを使う必要はありません
頻繁に検索窓を使う窓辺ちゃんは、
ヘッダーを固定しようと思い立ったのだった！
このサイトでも設定済みだからスクロールしてみてね。ある程度画面が大きくないと有効になりまへん。
style.css/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
.app:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
けどScrapboxのことだから検索窓にジャンプするショートカットキーくらいありそうだな…。
スマホの表示テストはあんまりしてないので未対応だよー。
ぼんやり対応しました。 2017-12-02
Windows と Android の Chrome でテストしたよ。
iPad というか Safari でうまく表示されないみたいです。
mobile.css/* スマホ向け */
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
.app:not(.presentation) { padding-top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto } }
import.css/* 本体 */
@import "https://scrapbox.io/api/code/scrasobox/ヘッダーメニューを固定する/style.css";
/* スマホ用 */
@import "https://scrapbox.io/api/code/scrasobox/ヘッダーメニューを固定する/mobile.css";
2017-11-04 ページメニューの展開位置がずれてたので修正
2017-11-26 画像のポップアップ時にページコンテナがパカパカするのを修正したつもり
2017-11-27 ページメニューの position:sticky が効かなくなってたので応急処置
2017-11-28 ヘッダーメニューの展開位置がずれてたのと、縦に長いメニューの下が隠れて見えないのを修正
2017-12-02 ドロップダウンメニューがページ高さより大きいときスクロールできないのを修正 & スマホ対応
2018-01-10 ヘッダーのメニュー出現位置を調整
2018-05-16 プレゼンモード回避用のCSSを修正
2021-06-12 追記しました