将div滑入和滑出视口

Question

我正在尝试实现类似于airbnb.com主页以及按钮工作方式的效果。

我已经能够进行以下操作： http : //jsfiddle.net/n89z4bz3/

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

我的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>

Answer 1

尝试这个

http://jsfiddle.net/n89z4bz3/1/

 $(document).ready(function() { var heightVar = 0 - $(window).height(); $('.main-container').css('height', $(window).height() + 'px'); $('.click-this').on('click', function() { $('.upper-container').animate({ height: '100px', paddingTop: '40px' }, 500); }); }); 

 .upper-container { position: reltive; width: 100%; padding-top: 0px; background: red; height: 0px; overflow: hidden; } .main-container { background: blue; position: relative; } .click-this { background: #fff; color: #333; padding: 20px; margin-left: 20px; width: 300px; margin-top: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="upper-container"> Hidden container </div> <div class="main-container"> Visibile container <div class="click-this"> Click This to Slide Down </div> </div>