javascript - 将 div 滑入和滑出视口(viewport)

Question

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

我已经能够完成以下 fiddle :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>