日: 2016年5月2日

あとでまとめろ

背景透明
http://qiita.com/mikuhonda/items/99a7a8acdb2921860ce0

jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
http://www.webopixel.net/javascript/1037.html

ポイントは

ボディーにして

<script>
(function($) {
    $(function() {
        var $header = $('body');
        $(window).scroll(function() {
            if ($(window).scrollTop() > 70) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
    });
})(jQuery);
</script>

<header id="top-head">

そいつにcssで調整これだけじゃないかも

/*transition*/
#top-head,#head_rogo img,#heder_right
{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
#top-head {
    }
	
	
.fixed #top-head {
	position: fixed;
	top:0px;
    padding-top: 0px;
     background-color: rgba(255,231,55,0.9);
	z-index:10000000000;
	width:100%;
	height:70px;
}

.fixed{#header_color { display:none} 
/*#d_header_all,#header_width,#d_header_in,*/
#head_rogo img{height:70px;
    padding-bottom:5px!important}
#top_caro{ margin-top:246px;}
#heder_right{padding-top:33px!important}
		}

#head_rogo img{ height:200px;}

そんでブートも調整

#head_rogo img{ height: auto}

@media (max-width: 640px) {
#heder_right3{
padding-top:0!important;
}

.fixed #heder_right3{ padding-top:12px!important}

#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 390px}
}

@media (max-width: 480px) {
#heder_right3{
margin-top:-6px;
}
.fixed #heder_right3{ padding-top:19px!important;}

#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 290px}
}

@media (max-width: 320px) {
#heder_right3{
}
.fixed #heder_right3{ padding-top:24px;}
#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 200px}
}