clingify.jsを使ってメニューを固定してみたけれど…

Cocoon

スクロールとともに消えてしまうメニューが残念なのでなんとかしたい。

簡単に要素を固定できる clingify.js を使う。

theroux/clingify
A very flexible jQuery plugin for sticky page elements - theroux/clingify

① CSSを読み込む

head-insert.php

<link rel="stylesheet" href="/css/clingfy.css" />

② ボディの後タグ直前に設置したい(htmlの読み込みが終わってからタグを書き換える必要があるから)ため、 footer-insert.php を編集。

clingify.js の読み込みと合わせて、#navi要素を固定するためのトリガを追加する。

footer-insert.php

<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の構成とブラウザーとの相性(?)があるようで別の方法を探すことになった。 fifefoxではサブメニューも正常表示されるのだけれど、c...