headerをスクロールの途中で固定する

header部分をスクロールしても表示させたい

サンプルはこちらから

<script type=”text/javascript”>
$(function(){
$(window).scroll(function(){ //スクロールイベント
var y = jQuery(this).scrollTop();
if(y>=100){
$(function(){
$(‘header’).addClass(‘scroll’);
})
} else {
$(function(){
$(‘header’).removeClass(‘scroll’);
})
};
});
var headerHight = 110; //ヘッダの高さ
$(‘a[href^=#]’).click(function(){
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
$(“html, body”).animate({scrollTop:position}, 550, “swing”);
return false;
});
});
</script>

CSS

header {
background-color: rgba(255,255,255,0.7);
height: 200px;
top: 0px;
left: 0px;
width: 100%;
position:absolute;
z-index:10;
}
header.scroll {
position:fixed;
height: 100px;
}

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください