Fixed shopping cart

by Bruno G.

HTML

<!-- From : http://www.michelgotta.de/sticky-scrolling-shoppingcart-with-jquery/ -->
    <div class="container">
			<div class="span-12 last" id="header">
				<h1>
					Onlineshop
				</h1>
			</div>
			<div class="clear span-3" id="shopping-cart">
				<h3>
					Shoppingcart
				</h3>
				<p>Some Product 100$</p>
				<p>Some Product 100$</p>
				<p>Some Product 100$</p>
			</div>
			<div class="span-9 last" id="products">
				<div class="span-9 last product">
					<div class="span-3 product-picture">
						<small>Product picture</small>
					</div>
					<div class="span-6 last">
						<div class="span-6 last product-name">
							<h2>
								Product Name
							</h2>
						</div>
						<div class="clear span-6 last product-description">
							<p>
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
							</p>
							<p>Add product</p>
						</div>
					</div>
				</div>
				<div class="span-9 last product">
					<div class="span-3 product-picture">
						<small>Product picture</small>
					</div>
					<div class="span-6 last">
						<div class="span-6 last product-name">
							<h2>
								Product Name
							</h2>
						</div>
						<div class="clear span-6 last product-description">
							<p>
								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
							</p>
							<p>Add product</p>
						</div>
					</div>
				</div>
				<div class="span-9 last product">
					<div class="span-3 product-picture">
						<small>Product picture</small>
					</div>
					<div class="span-6 last">
						<div class="span-6 last product-name">
							<h2>
								Product Name
							</h2>
						</div>
						<div...

CSS

html, body, div, span, h1, h2, h3, p { margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
body { line-height:1.5; }
html { font-size:100.01%; }
body { font-size:75%; color:#222; background:#fff; font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1,h2,h3 { font-weight:normal; color:#111; }
h1 { font-size:3em; line-height:1; margin-bottom:0.5em; }
h2 { font-size:2em; margin-bottom:0.75em; }
h3 { font-size:1.5em; line-height:1; margin-bottom:1em; }
p { margin:0 0 1.5em; }
.small { font-size:.8em; margin-bottom:1.875em; line-height:1.875em; }
.last { margin-right:0; padding-right:0; }
.container { width:940px; margin:0 auto;}
div.span-3, div.span-6, div.span-9, div.span-12 { float:left; margin-right:20px;}
.last, div.last { margin-right:0; }
.span-3 { width:220px; }
.span-6 { width:460px; }
.span-9 { width:700px; }
.span-12 { width:940px; margin-right:0; }
.container:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.container {display:block;}
.clear { clear:both; }
h1, h2, h3 {
	font-weight: bold;
}
.product {
	margin-bottom: 20px;
	background-color: #eee;
}
.product-picture {
	height: 220px;
	background-color: #444;
}
#header {
	height: 100px;
}
#shopping-cart {
	background-color: #eee;
}
.fixed {
	position: fixed;
	top: 20px;
	margin-left: 0;
	background-color: #0f0 ! important;
}

JavaScript

// check where the shoppingcart-div is  
    var offset = $('#shopping-cart').offset();  
    $(window).on('scroll', function () {    
        var scrollTop = $(window).scrollTop(); 
        // check the visible top of the browser     
        if (offset.top<scrollTop) {
            $('#shopping-cart').addClass('fixed'); 
        } else {
            $('#shopping-cart').removeClass('fixed');   
        }
    });