いわゆるスティッキーヘッダー | 京都でホームページ制作『みやこデザイン』

スティッキーなヘッダーを作る。

$(function () {
    $('#header').each(function () {
        var $window = $(window), // Window オブジェクト
            $header = $(this),   // ヘッダー
            // ヘッダーのクローン
            $headerClone = $header.contents().clone(),
            // ヘッダーのクローンのコンテナー
            $headerCloneContainer = $('<div id="sticky-header"></div>'),
            // HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ
            threshold = $header.offset().top + $header.outerHeight();
        // コンテナーにヘッダーのクローンを挿入
        $headerCloneContainer.append($headerClone);
        // コンテナーを body の最後に挿入
        $headerCloneContainer.appendTo('body');
          $window.on('scroll', function () {
            if ($window.scrollTop() > threshold) {
                $headerCloneContainer.addClass('visible');
            } else {
                $headerCloneContainer.removeClass('visible');
            }
        });
        // スクロールイベントを発生させ、初期位置を決定
        $window.trigger('scroll');
    });
});

$(function () {

$('#header').each(function () {

var $window = $(window), // Window オブジェクト

$header = $(this), // ヘッダー

// ヘッダーのクローン

$headerClone = $header.contents().clone(),

// ヘッダーのクローンのコンテナー

$headerCloneContainer = $('<div id="sticky-header"></div>'),

// HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ

threshold = $header.offset().top + $header.outerHeight();

// コンテナーにヘッダーのクローンを挿入

$headerCloneContainer.append($headerClone);

// コンテナーを body の最後に挿入

$headerCloneContainer.appendTo('body');

$window.on('scroll', function () {

if ($window.scrollTop() > threshold) {

$headerCloneContainer.addClass('visible');

} else {

$headerCloneContainer.removeClass('visible');

}

});

// スクロールイベントを発生させ、初期位置を決定

$window.trigger('scroll');

});

　これは本を参考にした。でもね、スティッキーではロゴ画像を変えたかったんだな。これって以外と単純な方法でできるんやんね。つまり、画像を2枚書き込んで置いて、クラスで表示を切り替える訳です。

<header id="header" role="banner">
	<div class="inner">
		<div class="logo default">
  			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php md_print_Logo();?></a>
		</div>
		<div class="logo only-sticky">
  			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo( 'template_directory' ); ?>/images/sticky-logo.png"></a>
		</div>
	<nav id="mainNav">
		<div class="nav-inner">
			<?php $topNav = wp_nav_menu( array( 'container' => '', 'items_wrap' => '<ul>%3$s</ul>','theme_location'=>'primary','walker' => new description_walker()) );?>
		</div>
	</nav>
	</div>
</header>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php md_print_Logo();?></a>

</div>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo( 'template_directory' ); ?>/images/sticky-logo.png"></a>

</div>

<?php $topNav = wp_nav_menu( array( 'container' => '', 'items_wrap' => '<ul>%3$s</ul>','theme_location'=>'primary','walker' => new description_walker()) );?>

</div>

</nav>

</div>

</header>

　デフォルトのロゴとスティッキー用のロゴを用意した。

　せっかくなのでスタイルも書いておこう。

/* sticky-header
----------------------------------*/

#sticky-header {
	background-color: #fff;
	opacity:0.9;
	position: fixed;
	top: -100px;
	width:100%
	z-index:30;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25);
	box-shadow: 0 1px 1px rgba(0,0,0,0.25);
	-webkit-transition: top 0.25s;
	transition: top 0.25s;
}

#sticky-header.visible {
	top:0;
	width:100%;
	height:68px;
}

#sticky-header:hover {
	opacity:1;
}

#sticky-header #mainNav {
	padding: 10px 0 0;
}

#header.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	box-shadow: 1px 2px 3px 1px #7E7E7E;
	-webkit-box-shadow: 1px 2px 3px 1px #7E7E7E;
	-moz-box-shadow: 1px 2px 3px 1px #7E7E7E;
}

/* ロゴ (サイトタイトル)
----------------------------------*/
.logo{
clear:both;
float:left;
padding:15px 3px 9px;
}

.logo.only-sticky {
	display:none;
	padding: 5px 0 0;
	max-height:32px;
	width:auto;
}

#sticky-header .logo.default {
	display:none;
}

#sticky-header.visible .logo.only-sticky {
	display:block;
	float:left;
}

/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 959px){

	#header {width:100%;display:block !important;min-height:100px;}

	#header .logo.default {
		width:92%;
		margin: 0 auto;
		float:none;
		}

	#header .logo.default a img {
		display:block;
		margin:0 auto;
	}

	#sticky-header.visible {
		display:none;
	}

	#sticky-header nav#mainNav {
		display:none;
	}

}

/* sticky-header

----------------------------------*/

#sticky-header {

background-color: #fff;

opacity:0.9;

position: fixed;

top: -100px;

width:100%

z-index:30;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25);

box-shadow: 0 1px 1px rgba(0,0,0,0.25);

-webkit-transition: top 0.25s;

transition: top 0.25s;

}

#sticky-header.visible {

top:0;

width:100%;

height:68px;

}

#sticky-header:hover {

opacity:1;

}

#sticky-header #mainNav {

padding: 10px 0 0;

}

#header.sticky {

position: fixed;

width: 100%;

left: 0;

top: 0;

box-shadow: 1px 2px 3px 1px #7E7E7E;

-webkit-box-shadow: 1px 2px 3px 1px #7E7E7E;

-moz-box-shadow: 1px 2px 3px 1px #7E7E7E;

}

/* ロゴ (サイトタイトル)

----------------------------------*/

.logo{

clear:both;

float:left;

padding:15px 3px 9px;

}

.logo.only-sticky {

display:none;

padding: 5px 0 0;

max-height:32px;

width:auto;

}

#sticky-header .logo.default {

display:none;

}

#sticky-header.visible .logo.only-sticky {

display:block;

float:left;

}

/* 959px以下から 1カラム表示

------------------------------------------------------------*/

@media only screen and (max-width: 959px){

#header {width:100%;display:block !important;min-height:100px;}

#header .logo.default {

width:92%;

margin: 0 auto;

float:none;

}

#header .logo.default a img {

display:block;

margin:0 auto;

}

#sticky-header.visible {

display:none;

}

#sticky-header nav#mainNav {

display:none;

}

でもこれね、ubermenu使ったら、スティッキーにした時ドロップダウンしなくなっちゃって。クローンにしたことが影響したと思う。

やり方としては、クローンを作らなくても、ヘッダーの高さを取得して、それ+10pxほどスクロールしたら、アニメーションで下に下ろしてくればいいなと思ったんだけど、アニメがつくれなかった。なので、普通のスティッキーにしたよ。でも、これでも一応動くと思う。