fixed leaderboard for 6 seconds test

by hellosze

HTML

<body style="height:3000px">
<script>
</script>

<div id="container">
	<div style="height:50px;display:block;"></div>
	<div id="leaderboard">
		<img src="http://fpoimg.com/728x90" />
	</div>

	<div id="right-rail">
		<div id="ad1-300">
			<img src="http://fpoimg.com/300x250" />
		</div>

		<div style="height:50px;display:block;"></div>

		<div id="ad2-300">
			<img src="http://fpoimg.com/300x250" />
		</div>

	</div>
</div>

<div style="position:absolute;top:1200px;width:100%;border:dashed red 1px;height:2px;">Leaderboard will snap back at 1200px</div>
</body>

CSS

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#leaderboard {
    min-width: 728px;
    max-width: 970px;
    margin: 0 auto;
}
#right-rail {
    float: right;

}

JavaScript

window.addEventListener("scroll",function(){
	var l = document.getElementById("leaderboard");
	var top = l.getBoundingClientRect().top;
	var table = [];
	table.push(["window.scrollY", window.scrollY]);
	table.push(["leaderboard.top", top]);
	if(window.scrollY > top && window.scrollY < 1200){
		l.classList.add("fixed");
		window.setTimeout(function(){
			l.classList.remove("fixed");
		},6000);
	}
	else {
		l.classList.remove("fixed");
	}
	console.table(table);
});