ヘッダーやメニューなどをスクロールしても上部に固定
筆者の別サイト作成した事例でCSSとiQueryを利用。
スクロールバーを下にスライドさせると、ヘッダー類は動かず、記事のみがスクロールします。
1.HTML
1 2 3 |
<div id="header_menu"> <!-- 固定するヘッダーやメニューの内容 --> </div> |
2.CSS
1 2 3 4 5 6 |
#header_menu_fixed { width:650px; position: fixed; width: 100%; top: 0; z-index: 100;} |
3.jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { var menu = $('#header_menu'), offset = menu.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { menu.addClass('header_menu_fixed'); } else { menu.removeClass('header_menu_fixed'); } }); }); |