スクロールしてもメニューが固定されるようJavaScriptとCSSでなんとかする／改訂

簡単だなあと感心していたclingify.jsによるナビメニューの固定だったが、Cocoonの構成とブラウザーとの相性（？）があるようで別の方法を探すことになった。

スクロールとともに消えてしまうメニューが残念なのでなんとかしたい。簡単に要素を固定できる clingify.js を使う。 ① CSSを読み込む head-insert.php <link rel="st...

fifefoxではサブメニューも正常表示されるのだけれど、chromeもエッジもサブメニューが隠れてしまう。

javascript.js

$(function($) {
	var nav = $('#navi'),
	offset = nav.offset();
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top) {
			nav.addClass('naviFixed');
		} else {
			nav.removeClass('naviFixed');
		}
	});
});

$(function($) {

var nav = $('#navi'),

offset = nav.offset();

$(window).scroll(function () {

if($(window).scrollTop() > offset.top) {

nav.addClass('naviFixed');

} else {

nav.removeClass('naviFixed');

}

});

style.css

/*ナビメニュー固定*/
.naviFixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

/*ナビメニュー固定*/

.naviFixed {

position: fixed;

top: 0;

width: 100%;

z-index: 999;

}

今のところ、これでいけている。