JSFiddle - React, Tailwind, and code Playground

by Jens Grochtdreis

HTML

<script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<div id="content">
  <h1>Yahoo's New Sidebar Behavior with jQuery.ScrollToFixed</h1><h2>Plugin Description</h2><p>jQuery.ScrollToFixed is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.</p><p>Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.</p><p>This plugin has been tested in Firefox 3+, Google Chrome 10+, Safari 5+, Internet Explorer 8/9+, and Opera 11.60+.</p><p>This plugin was inspired by the excellent tutorial presented by Remy Sharp, titled "Fixed Floating Elements". You will find that tutorial <a href="http://jqueryfordesigners.com/fixed-floating-elements/">here</a>.</p>
  <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...

CSS

body {
    font-family: arial, sans-serif;
}
h1, h2 {
    font-weight: bold;
    margin-top: 12px;
}
h1 {
    font-size: 140%;
}
h2 {
    font-size: 120%;
}
p {
    margin-top: 8px;
}

#content {
    float: left;
    width: 70%;
    margin: 20px;
}
#right {
    float: right;
    width: 25%;
}
#cart {
    border: 1px solid #dddddd;
}
#cart .title {
    border-bottom: 1px solid #dddddd;
    background-color: #dddddd;
    font-size: 12pt;
    font-weight: bold;
    padding: 4px;
}
#cart .contents {
    margin: 1px;
    padding: 4px;
}
#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;
}

.footer {
    clear: both;
    line-height: 400px;
    font-size: 20px;
    background-color: #cecece;
    color: #000;
}

JavaScript

// https://github.com/bigspotteddog/ScrollToFixed

$(document).ready(function() {
    $('#cart').scrollToFixed({
		marginTop: 10,
    	limit: $('.footer').offset().top - $('#cart').outerHeight() - 20,
    });
});