スティッキーなヘッダーを作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(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枚書き込んで置いて、クラスで表示を切り替える訳です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
デフォルトのロゴとスティッキー用のロゴを用意した。
せっかくなのでスタイルも書いておこう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
/* 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ほどスクロールしたら、アニメーションで下に下ろしてくればいいなと思ったんだけど、アニメがつくれなかった。なので、普通のスティッキーにしたよ。でも、これでも一応動くと思う。