dominykas · March 17, 2014 14:53
diff --git a/scrolly-cart.html b/scrolly-cart.html
 <!doctype html>
 <html>
 <head>
 	<title>Scrolly cart trial</title>
 	<style>
 		* {
 			box-sizing: border-box;
 		}

 		body {
 			margin: 0;
 			padding: 2em;
 			font-size: 13px;
 			font-family: Arial, sans-serif;
 		}

 		input {
 			font-size: 18px;
 		}

 		#para {
 			margin-top: 120px;
 		}

 		#cart {
 			width: 300px;
 			border: 1px solid #999;
 			background-color: rgba(255, 255, 255, 0.9);
 			position: fixed;
 			bottom: 0;
 			right: 0;
 			padding: 2em;

 			/*transition: 0.3s;*/
 		}

 		#cart p {
 			margin: 1em;
 			background-color: rgba(0, 0, 0, 0.2);
 			padding: 0.5em;
 			counter-increment: test;
 		}
 		#cart p span {
 			font-weight: bold;
 		}
 		#cart p:before {
 			content: counter(test);
 		}

 		h1 {
 			position: fixed;
 			background: rgba(255,255,239,0.9);
 			border-radius: 0.5em;
 			padding: 1em;
 		}
 	</style>
 </head>
 <body>

 <h1>
 	Para: <input type="number" min="1" value="1" id="paraSize"/>
 	Cart: <input type="number" min="1" value="1" id="cartSize"/>
 </h1>

 <div id="para">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et sapien posuere, elementum tortor in, feugiat
 		ipsum. Integer pharetra lectus ut ligula rhoncus, vitae mollis tortor consequat. Ut lorem lectus, sagittis et
 		diam non, congue pellentesque justo. Curabitur id aliquet ipsum. Sed vitae est augue. Class aptent taciti
 		sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam faucibus sagittis posuere. Aenean
 		eu neque a ante vehicula posuere et tincidunt ligula. Phasellus aliquam elit vitae vulputate dignissim. In sed
 		sem ornare, elementum purus id, pretium odio. Sed et fermentum orci, non aliquam mi. Nullam auctor pulvinar
 		arcu, vel adipiscing nisi iaculis eget.</p>
 </div>
 <div id="cart">
 	<p>
 		<span>Lorem ipsum dolor sit amet</span>
 		consectetur adipiscing elit
 	</p>
 </div>

 <script>
 	var cart = document.getElementById('cart');
 	var repositionCart = function () {
 		var position = cart.getBoundingClientRect();
 		var realCartHeight = Math.round(position.height);

 		var diff = realCartHeight - window.innerHeight;

 		var scrollTop = ((window.pageYOffset || document.scrollTop)  - (document.clientTop || 0)) || 0;
 		if (diff >= 0 && (diff >= scrollTop || realCartHeight >= document.documentElement.scrollHeight)) {
 			console.log(scrollTop);
 			cart.style.position = 'absolute';
 			cart.style.marginBottom = (-diff)+'px';
 		} else {
 			console.log(diff, ' - ', scrollTop);
 			cart.style.position = 'fixed';
 			cart.style.marginBottom = 0;
 		}
 	};

 	window.addEventListener('scroll', repositionCart);
 	window.addEventListener('resize', repositionCart);

 	var setup = function (what) {
 		var elSize = document.getElementById(what + 'Size'), elWhat = document.getElementById(what);

 		var p = elWhat.firstElementChild.cloneNode(true);

 		var repaint = function () {
 			var v = parseInt(elSize.value, 10);
 			if (v >= 1) {
 				while (elWhat.children.length < v) {
 					elWhat.appendChild(p.cloneNode(true));
 				}
 				while (elWhat.children.length > v) {
 					elWhat.removeChild(elWhat.firstElementChild);
 				}
 			}
 			localStorage.setItem(what, v);
 			repositionCart();
 		};

 		elSize.addEventListener('change', repaint);

 		elSize.value = localStorage.getItem(what);
 		repaint();
 	};
 	setup('para');
 	setup('cart');
 </script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Scrolly cart trial</title>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	padding: 2em;
	font-size: 13px;
	font-family: Arial, sans-serif;
	}

	input {
	font-size: 18px;
	}

	#para {
	margin-top: 120px;
	}

	#cart {
	width: 300px;
	border: 1px solid #999;
	background-color: rgba(255, 255, 255, 0.9);
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 2em;

	/transition: 0.3s;/
	}

	#cart p {
	margin: 1em;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 0.5em;
	counter-increment: test;
	}
	#cart p span {
	font-weight: bold;
	}
	#cart p:before {
	content: counter(test);
	}

	h1 {
	position: fixed;
	background: rgba(255,255,239,0.9);
	border-radius: 0.5em;
	padding: 1em;
	}
	</style>
	</head>
	<body>

	<h1>
	Para: <input type="number" min="1" value="1" id="paraSize"/>
	Cart: <input type="number" min="1" value="1" id="cartSize"/>
	</h1>

	<div id="para">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et sapien posuere, elementum tortor in, feugiat
	ipsum. Integer pharetra lectus ut ligula rhoncus, vitae mollis tortor consequat. Ut lorem lectus, sagittis et
	diam non, congue pellentesque justo. Curabitur id aliquet ipsum. Sed vitae est augue. Class aptent taciti
	sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam faucibus sagittis posuere. Aenean
	eu neque a ante vehicula posuere et tincidunt ligula. Phasellus aliquam elit vitae vulputate dignissim. In sed
	sem ornare, elementum purus id, pretium odio. Sed et fermentum orci, non aliquam mi. Nullam auctor pulvinar
	arcu, vel adipiscing nisi iaculis eget.</p>
	</div>
	<div id="cart">
	<p>
	<span>Lorem ipsum dolor sit amet</span>
	consectetur adipiscing elit
	</p>
	</div>

	<script>
	var cart = document.getElementById('cart');
	var repositionCart = function () {
	var position = cart.getBoundingClientRect();
	var realCartHeight = Math.round(position.height);

	var diff = realCartHeight - window.innerHeight;

	var scrollTop = ((window.pageYOffset \|\| document.scrollTop) - (document.clientTop \|\| 0)) \|\| 0;
	if (diff >= 0 && (diff >= scrollTop \|\| realCartHeight >= document.documentElement.scrollHeight)) {
	console.log(scrollTop);
	cart.style.position = 'absolute';
	cart.style.marginBottom = (-diff)+'px';
	} else {
	console.log(diff, ' - ', scrollTop);
	cart.style.position = 'fixed';
	cart.style.marginBottom = 0;
	}
	};

	window.addEventListener('scroll', repositionCart);
	window.addEventListener('resize', repositionCart);

	var setup = function (what) {
	var elSize = document.getElementById(what + 'Size'), elWhat = document.getElementById(what);

	var p = elWhat.firstElementChild.cloneNode(true);

	var repaint = function () {
	var v = parseInt(elSize.value, 10);
	if (v >= 1) {
	while (elWhat.children.length < v) {
	elWhat.appendChild(p.cloneNode(true));
	}
	while (elWhat.children.length > v) {
	elWhat.removeChild(elWhat.firstElementChild);
	}
	}
	localStorage.setItem(what, v);
	repositionCart();
	};

	elSize.addEventListener('change', repaint);

	elSize.value = localStorage.getItem(what);
	repaint();
	};
	setup('para');
	setup('cart');
	</script>

	</body>
	</html>