Javascript 将div滑入和滑出视口

我正在尝试实现一种类似airbnb.com主页的效果，以及它的“工作原理”按钮

我能做以下的小提琴演奏：

但是，我无法实现滑动效果，也无法将可见容器固定到滑入上部容器的底部

我的Jquery代码如下：

$(document).ready(function(){
    var heightVar = 0 - $(window).height();
    $('.upper-container').css('top',heightVar+'px');
    $('.main-container').css('height', $(window).height()+'px');
    $('.click-this').on('click', function(){
        $('.upper-container').css('top', '0');
        $('.main-container').css('margin-top',$('.upper-container').height()+'px');
    });
});

我的HTML设置如下：

<div class="upper-container">
    Hidden container
</div>
<div class="main-container">
    Visibile container
    <div class="click-this">
        Click This to Slide Down
    </div>
</div>

隐藏容器
可视容器
单击此按钮可向下滑动

试试这个

$（文档）.ready（函数（）{
var heightVar=0-$（窗口）.height（）；
$（'.main container'）.css（'height'，$（window.height（）+'px'）；
$（'.click this'）。在（'click'，function（）上{
$（'.upper container'）。设置动画({
高度：“100px”，
paddingTop:'40px'
}, 500);
});
});
。上部容器{
职位：关系型；
宽度：100%；
填充顶部：0px；
背景：红色；
高度：0px；
溢出：隐藏；
}
.主货柜{
背景：蓝色；
位置：相对位置；
}
.点击这个{
背景：#fff；
颜色：#333；
填充：20px；
左边距：20px；
宽度：300px；
边缘顶端：40px；
}

隐藏容器
可视容器
单击此按钮可向下滑动