Question

This may be the thickest question ever! But how do I get this to work on my html?

HTML

<div class="test2"></div>

<div class="test"></div>

<div class="test3"></div>

CSS

.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;
} ​​

JS

var $test2 = $(".test2");
$(window).scroll(function() {
    if ($(this).scrollTop() > 20) {
        $test2.stop().animate({
            left: "200px"
        }, 200);
    }
});    

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

http://jsfiddle.net/maxmitch/UgEu6/ (complete sample)

Answer 1

A simple way to get a one page working version of a jsFiddle is to use their “Share full screen result” link, which for your example is jsfiddle.net/maxmitch/UgEu6/embedded/result/.

Then all you need to do is right click on the main frame and copy the source code. Note that if you’re using jsFiddle’s “normalize css” option that you’ll have to adjust the path to the CSS files you see.