当底部 div 消失时，将顶部 div 拉到底部

Question

目前，.div1 浮动在视频帧底部上方 50px。当 .div2（控制栏）消失时，我希望 .div1 向下移动并坚持到新的底部。

就像 Netflix 的视频播放器处理字幕的方式一样，当控制栏消失时，字幕应该 "pulled" 下降到底部。这就是我要找的。 Test

body {
  background-color: gray;
  margin: 0 auto;
}
.out {
  width: 1000px;
  position: relative;
  height: 560px;
  background-color: #000;
  left: 50%;
  margin-left: -500px;
  top: 50%;
  margin-top: -280px;
}
.div1 {
  width: 100%;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 50px;
}
.div2 {
  width: 100%;
  height: 50px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

<div class="out">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

Answer 1

在 jQuery 中是：

$(".out").find(".div2").hide().end().find(".div1").css({"bottom": "0px"});

包含 jQuery.

后适用于您的测试页

Answer 2

通过切换蓝色 div 的可见性，您还可以更改 css bottom 来回移动。我放了一个按钮来触发事件，你可以使用任何东西（悬停某个东西，点击其他东西等）

var flip = 0;
$('#btnChange').on('click',function(){
    $('.div2').toggle(0,function(){
        if(flip++ % 2 === 0){
            $('.div1').css("bottom", "0px");
        } else{
            $('.div1').css("bottom", "50px");
        }
    });
});

http://jsfiddle.net/acsvrzLf/

当底部 div 消失时，将顶部 div 拉到底部

Pull top div down to the bottom when bottom div disappears

jquery

html

css

sticky