ヘッダー画像下のメニューがスクロールして画面からはずれそうになったタイミングで上部固定に切り替わる、という動きを後付けするコード。
半透過にしておいたり、背景同色＋透過でレースや町並みなどの模様つけておくとちょっとした動きがオシャレになってお気に入りで、積極的につけていた時期がある。少し前のものなので動作テストはしていないけれど、その当時はこんなかんじで動かしていた。
最近はもとから搭載されているテーマも多くてうれしいかぎり。
|
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 |
register_sidebar( array( 'name' => 'myfixed_bar', 'id' => 'myfixed_bar', 'before_widget' => '<div class="myfixed_bar">', 'after_widget' => '</div>', 'before_title' => '<h3 style="display:none">', 'after_title' => '</h3>' ) ); function myfooter() { dynamic_sidebar('myfixed_bar'); echo <<< EOM <style> .myfixed_bar { padding: 0 20px; margin: 0 auto 60px; height:50px line-height:50px; opacity:0.8; position:relative; top:-180px; left:0; } .myfixed_bar li { list-style: none; float: left; } .myfixed_bar:hover{ opacity:0.95; } .myfixed_bar li:hover { border-bottom:5px solid #000; } .myfixed_bar li a { text-decoration: none; color: #000; padding: 8px 12px; display: block; font-weight:bold; } .myfixed_bar li a:hover { color: #000; } .fixed { position: fixed; top: 0; left: 0; width: 100%; background: #fff; font-size:85%; } .fixed li a{ opacity:0.95; color:#555; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var nav = $('.myfixed_bar'); //navの位置 var navTop = nav.offset().top; //スクロールするたびに実行 $(window).scroll(function () { var winTop = $(this).scrollTop(); //スクロール位置がnavの位置より下だったらクラスfixedを追加 if (winTop >= navTop) { nav.addClass('fixed') } else if (winTop <= navTop) { nav.removeClass('fixed') } }); }); </script> EOM; } add_action( 'loop_start', 'myfooter' ); |