Javascript 使滑动切换底部和顶部，而不是左或右固定div

HTML:

我想在slideToggle逻辑中使用这个div。但它有两大问题：

1-我不知道为什么，但当我打开网站时，我的固定div已经打开了。然而，它必须是接近的

2-当我单击标题时，它将关闭。好啊但如果我尝试打开或关闭我的div两次，它就不起作用了

我怎么做

$（'#form.header'）。单击（函数（）{
$（'#form'）.stop（）.animate({
底部：“0px”
}, 500);
}，函数（）{
变量高度=$（“#形式”）.height（）-60；
$（'#form'）.stop（）.animate({
底部：-高度
}, 500);
});
#表单{
位置：固定；
底部：0；
右：80px；
宽度：400px；
高度：720px；
z指数：99999；
背景：红色；
}
.标题{
背景：灰色；
宽度：399px；
高度：74px；
光标：指针；
}
尝试使用
top
。在jsiddle处调整为
-70px
jsiddle，使
.header
略微可见，可以单击

$(function () {
    var form = $("#form");
    form.find(".header").on("click", function (e) {
        $("#form").animate({
            top: form.css("top") === "-70px" ? "80%" : "-70px"
        }, 500)
    });
});

尝试使用
top
。在jsiddle处调整为
-70px
jsiddle，使
.header
略微可见，可以单击

$(function () {
    var form = $("#form");
    form.find(".header").on("click", function (e) {
        $("#form").animate({
            top: form.css("top") === "-70px" ? "80%" : "-70px"
        }, 500)
    });
});