【jQuery】Bootstrapの固定メニューをスクロールで表示非表示にするtips

公開日:2018年2月19日 2021年9月23日更新

Categoryweb制作

わりと使う事多いような気がするので備忘録的に。IE11にも対応。

Bootstrapのヘッダー固定メニューをスクロールで表示・非表示させる

Bootstrapのメニューを固定した時、スクロールさせたらメニューの表示領域が大きいからコンテンツが見えづらい、そんな時のために。

var menuHeight = $(".navbar-fixed-top").height();
var startPos = 0;
$(window).scroll(function(){
	var currentPos = $(this).scrollTop();
	if (currentPos > startPos) {
	if($(window).scrollTop() >= 200) {
		$(".navbar-fixed-top").css("top", "-" + menuHeight + "px");
	}
} else if (startPos > currentPos) {
	$(".navbar-fixed-top").css("top", 0 + "px");
}
startPos = currentPos;
});

IE11,IE10,Firefox,Google Chromeで確認。

前の記事：: « 突き抜ける瞬間

次の記事：: 【Excel】URLのタイトルを取得するマクロ »