How do you put jsfiddle on your html
<p>This may be the thickest question ever! But how do I get this to work on my html?</p>

<p>HTML</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="test2"&gt;&lt;/div&gt;

&lt;div class="test"&gt;&lt;/div&gt;

&lt;div class="test3"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre class="lang-css prettyprint-override"><code>.test2 {margin-top: 250px;
       position:absolute;
       left: -100px;
       width:100px;
       height:100px;
       background: aqua;
}

.test {margin-top: 500px;
       position:absolute;
       right: -100px;
       width:100px;
       height:100px;
       background: aqua;
}

.test3 {margin-top: 1000px;
       position:absolute;
       right: 100px;
       width:100px;
       height:100px;
       background: aqua;
} ​​
</code></pre>

<p>JS</p>

<pre class="lang-js prettyprint-override"><code>var $test2 = $(".test2");
$(window).scroll(function() {
    if ($(this).scrollTop() &gt; 20) {
        $test2.stop().animate({
            left: "200px"
        }, 200);
    }
});    

var $test = $(".test");
$(window).scroll(function() {
    if ($(this).scrollTop() &gt; 100) {
        $test.stop().animate({
            right: "200px"
        }, 400);
    }
});​
</code></pre>

<p><a href="http://jsfiddle.net/maxmitch/UgEu6/" rel="nofollow">http://jsfiddle.net/maxmitch/UgEu6/</a> (complete sample)</p>
