parallax scrolling javascript error

<!doctype html>
<html>
	<head>
		<style>

			body{
				margin: 0;
				padding: 0;
			}

			ul{
				margin: 0;
				padding: 0;
			}

			ul li{
				list-style: none;
				overflow: hidden;
				height: 600px;
			}

			.parallax-background{
				height: 700px;
			}

			.flower{
				background-image: url('http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.jpg');
				background-position: 50% 70%;
			}

			.lens{
				background-image: url('http://lh5.ggpht.com/-Lg0g3WfBvR0/TiblYuKu3II/AAAAAAAABAM/xIaE-os2xOI/s9000/Camera%2BLens%2BIn%2BThe%2BDark%2BRoom.jpg');
				background-position: 50% 100%;
			}

			.beach{
				background-image: url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/tropical-beach-wallpaper.jpg');
				background-position: 50% 70%;
			}

			.wolf{
				background-image: url('http://jootix.com/upload/DesktopWallpapers/cache/grey-wolf-snow-grey-wolf-snow-1366x768.jpg');
				background-position: 50% 70%;
			}
		</style>
	</head>

	<body>

		<ul class="parallax">
			<li>
				<div class="parallax-background flower"></div>
			</li>

			<li>
				<div class="parallax-background lens"></div>
			</li>

			<li>
				<div class="parallax-background beach"></div>
			</li>

			<li>
				<div class="parallax-background wolf"></div>
			</li>
		</ul>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script>

		(function($) {

			var $container = $(".parallax");
			var $divs = $container.find("div.parallax-background");
			var thingBeingScrolled = document.body;
			var liHeight = $divs.eq(0).closest("li").height();
			var diffHeight = $divs.eq(0).height() - liHeight;

			var i, len, div, li, offset, scroll;

			var render = function(){

				//things were scrolling
				top = thingBeingScrolled.scrollTop;

				for(i = 0, len=$divs.length; i < len; i++){

					//get one div
					div = $divs[i];

					//get the parent LI
					li = div.parentNode;

					//calculate the offseTop of div
					offset = $(div).offset().top;

					//calculate the amount to scroll
					scroll = Math.round((top - offset) / liHeight) * diffHeight;

					//apply the scroll amount
					div.style.webkitTransform = "translate3d(0px, "+scroll+"px,0px)";

				}

			};

			(function loop(){

				requestAnimationFrame(loop);
				render();

			})();

		})(jQuery();

		</script>
	</body>
</html>