JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<body>
    <ul>
        <li id="content">
            <h1>Lorem ipsum dolor</h1><h2>Sit amet justo</h2><p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p><h2>Velit sed eget donec placerat vestibulum</h2><p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p><h2>Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue</h2><p>Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet...

CSS

body {
    font-family: arial, sans-serif;
    font-size: 80%;
    margin: 0 auto;
    width: 960px;
    height: 3000px;
}
body h1, h2 {
    font-weight: bold;
    margin-top: 12px;
}
body h1 {
    font-size: 140%;
}
body h2 {
    font-size: 120%;
}
body p {
    margin-top: 8px;
}
body ul {
    list-style: none;
    padding: 0px;
}
body li {
    display: inline-block;
    vertical-align: top;
}
#content {
    width: 600px;
    margin: 20px;
    display: none;
}
#right {
    width: 150px;
}
.cart {
    border: 1px solid #dddddd;
}
.cart .title {
    border-bottom: 1px solid #dddddd;
    width: 100%;
    background-color: #dddddd;
    font-size: 12pt;
    font-weight: bold;
}
.cart .contents {
    margin: 1px;
}
.cart .contents ul {
    padding: 10px;
}
.cart .contents li {
    display: block;
}
.cart .label {
    font-weight: bold;
    color: #999999;
}
.cart .total {
    font-weight: bold;
    font-size: 14pt;
}
#spacer {
    height: 100px;
}
#cart1 {
    position: absolute;
    top: 100px;
    width: 250px;
}
#cart2 {
    position: absolute;
    top: 500px;
    width: 250px;
}
#cart3 {
    position: absolute;
    top: 800px;
    width: 250px;
}
#cart4 {
    position: absolute;
    top: 1000px;
    width: 250px;
}

JavaScript

$(document).ready(function() {
    $('#cart1 .title').scrollToFixed( { marginTop: 10 } );
    $('#cart2 .title').scrollToFixed( { marginTop: 34 } );
    $('#cart3 .title').scrollToFixed( { marginTop: 58 } );
    $('#cart4 .title').scrollToFixed( { marginTop: 82 } );
});