JSFiddle - React, Tailwind, and code Playground

by Darksbane

HTML

<script src="http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<body>
    <div style="padding:10px;min-height: 500px;" id="shareDeckContainer">
			<div style="padding-bottom:8px">		
				<div id="dTags" style="white-space:pre;">Targaryen,Shagga</div>
				<div id="dTeaser" style="white-space:pre;">The idea is to get three cards out to help strengthen the burn.</div>
				<div id="dFormat" style="white-space:pre;">Joust</div>
				<div id="dHouse"></div>
				<div><strong>Agenda</strong><ul id="dAgenda"><li class="deckcard agenda"><a href="http://www.cardgamedb.com/index.php/GoTCards.html/_/a-song-of-the-sea/the-pirates-of-lys/the-long-voyage-tpol" class="AgendaHover" data-cid="1551" data-img="got/med_the-long-voyage-tpol.jpg" data-type="Agenda" title="The Long Voyage" style="font-size:14px;font-weight:bold;">The Long Voyage</a> (The Pirates of Lys)</li></ul></div>
				<div style="margin-top:10px;"><strong>Plot (<span id="plotCount">7</span>)</strong><ul id="dPlots"><li class="deckcard Plot" data-id="979">1x <a href="http://www.cardgamedb.com/index.php/GoTCards.html/_/brotherhood-without-banners/a-song-of-silence/retaliation-asosilence" class="PlotHover" data-cid="979" data-img="1287540757/gallery_67_99543.jpg" data-type="Plot" title="Retaliation!">Retaliation!</a> <span class="RJ">RJ</span> (A Song of Silence)</li><li class="deckcard Plot" data-id="1251">1x <a href="http://www.cardgamedb.com/index.php/GoTCards.html/_/a-tale-of-champions/trial-by-combat/i-fight-to-win-tbc" class="PlotHover" data-cid="1251" data-img="got/i-fight-to-win-tbc.jpg" data-type="Plot" title="I Fight to Win">I Fight to Win</a> <span class=""></span> (Trial by Combat)</li><li class="deckcard Plot" data-id="513">1x <a href="http://www.cardgamedb.com/index.php/GoTCards.html/_/a-clash-of-arms/ancient-enemies/fury-of-the-dragon-ae" class="PlotHover" data-cid="513" data-img="1281901656/gallery_14_87460.jpg" data-type="Plot" title="Fury of the Dragon">Fury of the...

CSS

body {
    font-family: arial, sans-serif;
    font-size: 80%;
    margin: 0 auto;
    width: 960px;
}
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;
}
#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;
}

JavaScript

$(document).ready(function() {
    $('#blah').scrollToFixed({ marginTop: 10, limit: $('#dStrat').offset().top-$('#blah').height()-10 });//$($('h2')[5]).offset().top });
    $('#mybutton').click(function(){
        $('#cardDisplayText').append("asdf asdfklj  adsfj a;jdf ;a<br /><br /> jsdafj das;f a; jafdil; afj;i d<br />f ajspdfj<br /> apsodf a; fdajsfi daj;aif s;dij<br />fasdj;<br /> fjdisaodfjodas jf kasdjf a jidjfaoi");
        $('#blah').trigger('resize');
//        $(window).scroll();
         $('#blah').trigger('detach.ScrollToFixed');
        $('#blah').scrollToFixed({ marginTop: 10, limit: $('#dStrat').offset().top-$('#blah').height()-10 });
    });
});