jQueryを使ってスクロール量を監視し要素が特定の位置になったらクラスを付けてスタイルを変更する

このスクリプトはサンプルは当サイトのヘッダーで使っているので効果はスクロールすると確認できます。
やっている事は単純で#headerの位置と高さを取得して#headerがwindowからオーバーフローした時にid=”header”にclass=”fixed”を追加したり削除したりしています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var header = $('#header')
header_offset = header.offset();
header_height = header.height();
$(window).scroll(function () {
if($(window).scrollTop() > header_offset.top + header_height) {
header.addClass('header_fixed');
}else {
header.removeClass('header_fixed');
}
});
});
</script>
<style type="text/css">
#header.header_fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height:70px;
background-color:#FFF;
border-bottom: 1px dotted #dddddd;
z-index:10;
}
</style>
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

1 × two =