div通过其父级的顶部溢出一半

Question

我正试图制作一个漂亮的底部抽屉滑块。

页面底部会有一个圆形按钮，当抽屉关闭（半圈）时，只有一半应该显示，然后单击它以展开抽屉

愚蠢的图表：

d:DataContext="{d:DesignInstance local:RepositoryContainerData, IsDesignTimeCreatable=True}"

JsFiddle：https://jsfiddle.net/ppgab/wcec9gc6/4/（我使用的是语义ui，但这不是必需的）

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

HTML

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

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

CSS

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

的JavaScript / jQuery的

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

如果使用百分比尺寸会更好。

Answer 1

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

1。向上移动图标

您可以使用简单的margin-top: 28px将其移动一半（总高度和填充为56px）或使用transform: translateY(-50%)（奖励积分）。

2。防止图标的透明度。

透明度是由overflow: hidden jQuery函数导致的#map元素中的animate()引起的。将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

Answer 2

试试这个片段，我摆脱了图标并改变了背景颜色。

$('#circle').click(function() {

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

  } else {

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

});

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

#circle {
  background-color: #303030;
  height: 70px;
  width: 70px;
  border-radius: 35px;
  margin: -35px auto;
}

<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>
      <div id="circle">
      
      </div>
  </div>
  bottom slider content
</div>

Answer 3

将.icon元素绝对放在#map div

中

<强> CSS

.icon {
    position:absolute;
        top:0;
        left:50%;
    transform: translate(-50%, -50%);
}