javascript - 让 div 通过其父项的顶部溢出它的一半

Question

我正在尝试制作一个好看的底部抽屉 slider 。

页面底部会固定一个圆形按钮，当抽屉关闭时只显示一半(半圆)，点击它展开抽屉

傻图:

  _____________________________
  |         Web Page          |
  |                           | 
  |                           |
  |           ____            |
  |__________/ /\ \___________|  < Closed (bottom of browser window)

  _____________________________
  |         Web Page          | 
  |           ____            |
  |__________/ /\ \___________|  < Opened
  |          \____/           |
  |___________________________|

JsFiddle:https://jsfiddle.net/ppgab/wcec9gc6/4/ (我正在使用语义 ui，但这不是必需的)

如何在抽屉关闭时只显示一半按钮？

HTML

<div>Page content</div>
<div id="map" class="down">
  <div>
      <i class="ui circular link expand big inverted icon"></i>
  </div>
  bottom slider content
</div>

CSS

#map {
  background-color: #303030;
  width: 100%;
  text-align: center !important;
  height: 4%;
  bottom: 0;
  position: fixed;
}

JavaScript/jQuery

$('.icon').click(function() {

  if ($("#map").hasClass("down")) {
    $("#map").removeClass("down");
    $("#map").animate({
      height: "50%"
    }, 600);

  } else {

    $("#map").animate({
      height: "4%"
    }, 350);
    $("#map").addClass("down");
  }

});

如果使用百分比维度会更好。

Answer 1

为了达到你想要的效果，我做了三处改动:

1。向上移动图标

您可以使用简单的 margin-top: 28px 将其向上移动一半(总高度和内边距为 56px)或使用 transform: translateY(-50% )(用于奖励积分)。

2。防止图标透明。

透明度是由 #map 元素中的 overflow: hidden 引起的，该元素由 animate() jQuery 函数引起。将 overflow: visible 添加到 #map 元素。

3。完全隐藏 #map

只需在 CSS 和 JS 中将 height 更改为 0。

---

总结:

$('.icon').click(function() {

  if ($("#map").hasClass("down")) {
    $("#map").removeClass("down");
    $("#map").animate({
      height: "50%"
    }, 600);

  } else {

    $("#map").animate({
      height: "0%"
    }, 350);
    $("#map").addClass("down");
  }

});

#map {
  background: #303030;
  width: 100%;
  text-align: center !important;
  height: 0;
  bottom: 0;
  position: fixed;
  overflow: visible !important;
}
i {
  margin-top: -28px;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Page content</div>

<div id="map" class="down">
  <div>
    <i class="ui circular link expand big inverted icon"></i>
  </div>
  bottom slider content
</div>

演示:JSFiddle