−スクロールして固定−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

CSS + JavaScriptで実現できる

＜ＨＴＭＬ＞
<div class="fix-header">
<div class="fix-header-contents">
	<div id="fix-header-logo">
		<a href="https://miin.site/"><img src="<?php echo get_template_directory_uri(); ?>/img/rogo.png" alt="Miin" /></a>
	</div>
	<div id="fix-header-menus" class="cf">
		<ul id="scroll-fix-menu" class="menu">
			<li><a href="https://miin.site/">トップページ</a></li>
			<li><a href="https://miin.site/method">施術方法</a></li>
			<li><a href="https://miin.site/course">目的別整形コース</a></li>
			<li><a href="https://miin.site/archives/hospital">各病院のご紹介</a></li>
			<li><a href="https://miin.site/archives/guide/">ガイドのご紹介</a></li>
			<li><a href="https://miin.site/monitor">モニター募集</a></li>
			<li><a href="https://miin.site/reserve">カウンセリング</a></li>
		</ul>
	</div>
</div>
</div>


＜ＣＳＳ＞
/*--------------------------------------------------------

固定ナビ

--------------------------------------------------------*/
.fix-header {
	background:rgba(251, 99, 126, 0.8);
	line-height: 60px;
	top: -60px;/* 上に隠す高さ */
	left: 0;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	color: #FFFFFF;
	padding-top:0px;
	position: fixed;
	opacity:0;/* 	最初読み込んだときは透過 */
	z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
}
.fix-header-contents{
		width:1050px;
		margin: 0 auto;
} 
.fix-header ul{
	list-style-type: none;
} 
.fix-header li{
	float:left;
	margin-right:32px;
} 
.fix-header li a,.fix-header li a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
.fix-header li:last-child{
	margin-right:0;
}
#fix-header-logo{
	float:left;
}
 
#fix-header-logo img{
	width:54px;
}
 
#fix-header-menus{
	float:right;
	text-align: right;
}
#scroll-fix-menu img{
	padding-bottom: 5px;
	border-bottom:2px solid #fff;
}
 
#scroll-fix-menu .current-menu-item img{
   border-bottom:2px solid #0f142a;
}
 
#scroll-fix-menu a img:hover{
	border-bottom:2px solid #0f142a;
	transition:border-color 0.6s ease-out;
}
 
/* micro clearfx */
.cf:before, .cf:after {
		content:"";
		display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */



＜JavaScript＞
//メニューヘッダ固定
$(function () {
	"use strict";
	var flag = "view";

	$(window).on("scroll", function () {
	// scrollTop()が「200」より大きい場合
	//画面トップから、ナビゲーションメニューまでの高さ（ピクセル）を指定すれば、メニュースクロールで
	//消えていくタイミングでヘッダが表示されて固定される。

	if ($(this).scrollTop() > 200) {
		if (flag === "view") {
		$(".fix-header").stop().css({opacity: '1.0'}).animate({
	//”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
			top: 0
			}, 500);

		flag = "hide";
		}
	} else {
		if (flag === "hide") {
		$(".fix-header").stop().animate({top:"-66px",opacity: 0}, 500);
		//上にあがり切ったら透過度を0%にして背景が生きるように
		//”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
		flag = "view";
		}
	}
});
});