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>

将div滑入和滑出视口

1 个答案: