Scroll Bottom Y Handeler Function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Window scroll spy box show after scrolling in footer right</title>
		<style media="screen">
		body {background: lime;}
			h1 {font-size: 40px; text-align: center; margin: 30px;}
			p {font-size: 20px; text-align: center;}
			#spybox {position: fixed;bottom: 0px; right: -352px;width: 300px;	height: 200px;background: #ddd;padding: 25px;
		font-size: 30px;}
		.bodyContent {height: 1600px;}
		</style>
		<script type="text/javascript">
			function yScrollHandler() {
				var win = document.getElementById("spybox");
				if((window.pageYOffset + window.innerHeight) >= document.body.offsetHeight){
						win.style.right = "0px";
						win.style.webkitTransition = "right 0.7s ease-in-out 0s";
						win.style.transition = "right 0.7s ease-in-out 0s";
				}
				else {
					 win.style.right = "-460px";
				}
			}
			window.onscroll = yScrollHandler;
		</script>
	</head>
	<body>
			<div class="bodyContent">
				<h1>Scroll Bottom Y Handeler Function</h1>
				<p>
					Scroll to the bottom of the page to use a spy box effect
				</p>
			</div>
			<div id="spybox">Write your content here</div>
	</body>
</html>