2013-10-20 4th

jsdoit.css

.clear { clear:both; }
* {
	margin:0;padding:0;font-size:1em;line-height:1.5;font-weight:normal;color:#333;
}
html, body {background:#3b3b3b;}
a { text-decoration:underline;color:#40b0eb; }
a:hover { text-decoration:none;color:#3384d6; }

.inner {
	width:800px;
	margin:auto;
}
#filler {
    text-align:center;
}


.header {
	background:#f3f3f3;
	border-bottom:2px solid #ddd;
}
.header h1 {
	float:right;
	width:676px;
}
	h1 a {
		display:block;
		color:#333;text-decoration:none;
	}
	.header h1 a {
		width:656px;height:84px;line-height:84px;
		padding:20px;padding-left:0;font-size:2.5em;
	}
	.header .img {
		float:left;
		width:124px;height:124px;
	}
		.header .img a {
			display:block;
			width:84px;height:84px;
			padding:20px;
		}
			.header img {
				width:80px;height:80px;
				border:2px solid #888;border-radius:5px;
			}

h2 {
	margin-bottom:20px;
	padding:10px;
	font-size:1.4em;font-weight:bold;
	border-left:5px #ff6d6d solid;
}
h3 {
	margin:0 10px 20px;
	padding:10px;
	font-size:1.2em;font-weight:bold;
	border-left:5px #fff06f solid;
}

.main {
	padding:50px 0;
	background:#fff;
}


.footer {
	padding:50px 0;
}
.footer .inner {
	text-align:center;font-weight:bold;
	color:#777;
}


.fixed_header {
	display:none;
	position:fixed;top:0;left:0;
	width:100%;
	background:#f3f3f3;
	border-bottom:2px solid #ddd;
	
	opacity:0.95;
}
	h1 {
		float:left;
	}
	.fixed_header h1 a {
		width:662px;height:44px;line-height:44px;
		padding:10px;padding-left:0;font-size:1.5em;
	}
	.fixed_header .img {
		float:left;
	}
	    .fixed_header .img a {
		    display:block;
	    	width:44px;height:44px;
		    padding:10px;
    	}
	.fixed_header img {
		width:40px;height:40px;
		border:2px solid #888;border-radius:5px;
	}
	.fixed_header #to_top {
		float:left;display:block;
		width:42px;height:42px;
		margin:10px;
		cursor:pointer;
		border:1px solid #333;border-radius:5px;background:url(http://yajidesign.com/i/0218/tnm.png) left;
	} .fixed_header #to_top:hover { border:1px solid #3384D6;background:url(http://yajidesign.com/i/0218/tnm.png) right; }

jsdoit.html

<script type="text/javascript" src="http://jsrun.it/assets/w/7/0/M/w70MI"></script>
<script type="text/javascript" src="http://jsrun.it/assets/j/X/h/p/jXhpi"></script>
<script type="text/javascript" src="http://jsrun.it/assets/i/s/U/Z/isUZn"></script>
    

<div class="header" id="top">
	<div class="inner">
		<h1><a href="">たいとる</a></h1>
		<div class="img"><a href=""><img src="http://atnd.org/event_images/0004/9505/icon_original.png?1351686529" alt="icon"></a></div>
		<p class="clear"></p>
	</div>
</div>
<div class="main">
    <div id="filler">
    </div>
</div>

<div class="fixed_header">
	<div class="inner">
		<div class="img"><a href="#top"><img src="http://atnd.org/event_images/0004/9505/icon_original.png?1351686529" alt="icon"></a></div>
		<h1><a href="#top">たいとる</a></h1>
		<a id="to_top" href="#top" title="ページの先頭へ"> </a>
		<p class="clear"></p>
	</div>
</div>

jsdoit.js

$(function(){
	$(window).scroll(function(){
		var SCRTOP = $(document).scrollTop();
		if(SCRTOP > 60){
			$(".fixed_header").css("display","block");
			$(".header .inner").css("visibility","hidden");
			$(".header").css("background","#fff").css("border-color","#fff");
		} else  {
			$(".fixed_header").css("display","none");
			$(".header .inner").css("visibility","visible");
			$(".header").css("background","#f3f3f3").css("border-color","#ddd");
		}
	});
    
    var str="";
    for(var i=0;i<10000;i++){
        str+="aaaaaaaaaaaaaaaaaaaaaaaaaaa<br>";
    }
    $('#filler').html(str);
});