Question

这可能是有史以来最厚的问题！但是如何让我的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/（完整样本）

Answer 1

获取jsFiddle的单页工作版本的一种简单方法是使用他们的“共享全屏结果”链接，例如jsfiddle.net/maxmitch/UgEu6/embedded/result /.

然后您需要做的就是右键单击主框架并复制源代码。请注意，如果您使用jsFiddle的“normalize css”选项，则必须调整所见CSS文件的路径。

Answer 2

“在你的HTML上？”我...它在你的HTML上不起作用。你有3个文件。 javascript文件，CSS文件和HTML文件。

在左侧，你会看到它在onDomReady事件中使用jQuery 1.7.2库，如果我记得那么

$(document).ready(function(){
    // code to execute
})

您需要为每个文件创建3个单独的文件。您需要知道如何将CSS和Javascript文件放入HTML文档中。谷歌，如果你不知道。

你如何把jsfiddle放在你的HTML上

2 个答案: