スクロールとともに消えてしまうメニューが残念なのでなんとかしたい。
簡単に要素を固定できる clingify.js を使う。
theroux/clingify
A very flexible jQuery plugin for sticky page elements - theroux/clingify
github.com
① CSSを読み込む
head-insert.php
|
1 |
<link rel="stylesheet" href="/css/clingfy.css" /> |
② ボディの後タグ直前に設置したい（htmlの読み込みが終わってからタグを書き換える必要があるから）ため、 footer-insert.php を編集。
footer-insert.php
|
1 2 3 4 5 6 |
<script type="text/javascript" src="/js/jquery.clingify.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('#navi').clingify(); }); </script> |
画面がスクロールしてもメニューが最上部に残るようになりました。
↓
よしよしと喜んでいたが、firefox以外のブラウザーで表示が乱れることが分かった。
具体的にはメニューからプルダウンしたサイドメニューがアピールエリアやサイドバーの下層に隠れてしまい見えない部分が出てきた。
z-indexで片付くだろうと考えていたが、いくら値を大きくしても手前に出てこない。
少し画面スクロールし、明らかにclingifyが働き始めると、ちゃんと前に出てきてくれるのだが…
仕方なくclingifyに頼るのを諦め、JavaScriptとCSSでなんとかすることにした。
スクロールしてもメニューが固定されるようJavaScriptとCSSでなんとかする／改訂
簡単だなあと感心していたclingify.jsによるナビメニューの固定だったが、Cocoonの構成とブラウザーとの相性（？）があるようで別の方法を探すことになった。
nnland.net
2019.06.11
