让 div 从其父项的顶部溢出它的一半

Question

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

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

愚蠢的图表：

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

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

内

CSS

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

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

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

1。向上移动图标

您可以使用简单的 margin-top: 28px 将其向上移动一半（总高度和内边距为 56 像素）或使用 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

让 div 从其父项的顶部溢出它的一半

Have div overflow half of it through the top of its parent

html

javascript

css

jquery

semantic-ui

1。向上移动图标

2。防止图标透明。

3。完全隐藏 `#map`

让 div 从其父项的顶部溢出它的一半

Have div overflow half of it through the top of its parent

html

javascript

css

jquery

semantic-ui

1。向上移动图标

2。防止图标透明。

3。完全隐藏 #map

3。完全隐藏 `#map`