将div元素溢出其父元素的一半并显示在顶部。

Question

我正在尝试制作一个外观漂亮的底部抽屉滑块。

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

简单的示意图如下：

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

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

JsFiddle: https://jsfiddle.net/ppgab/wcec9gc6/4/（我正在使用Semantic 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");
  }

});

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

- Mojimi

---

什么是问题？ - Armin

你能在问题中包含相关的代码吗？ - Jonathan Lam

你想要的是这个吗？https://jsfiddle.net/wcec9gc6/5/ - Michael Coker

不要动画高度 - 可以动画边距等其他属性。 - Luke Briggs

如果您在其中有任何底部定位的元素，它们将会向上压缩（并且从流程观点来看性能也会降低）。 - Luke Briggs

Answer 1

为了达到您想要的效果，我进行了三项更改：

1. 将图标向上移动

您可以使用简单的 margin-top: 28px 将其向上移动一半（它的总高度和内边距为56px），或者使用 transform: translateY(-50%)（加分项）。

2. 防止图标透明

透明性是由于 animate() jQuery 函数在 #map 元素中引起的 overflow: hidden。请将 #map 元素的 overflow 设置为 visible 。

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>

Demo: JSFiddle

- Jonathan Lam

---

按钮仍处于流动状态，这可能会导致不必要的间隙。同时，动画高度通常也不是一个好主意。 - Luke Briggs

这里有一个分支（https://jsfiddle.net/nhLe0ngg/），它将底部动画化而不是高度，并且没有那个间隙（因为按钮现在已经超出了流程）。 - Luke Briggs

我会采用Luke的答案，因为他在这个问题上似乎非常有说服力。 - Mojimi

只是为了好玩，这里还有一个无需点击的纯CSS版本 :) - Luke Briggs

@Mojimi 你应该使用正的z-index而不是负的，例如 z-index:1。或者，将实际的地图元素（_不是_指#map - 例如position:absolute）定位 - 这将生成一个新的“堆叠上下文”。 - Luke Briggs

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>

- user7252292

---

@Zeus，我看到你编辑了我的答案，将“white”更改为“#fff”。这是因为“#fff”更好吗？ - user7252292

用十六进制代码看起来更好看；这样看起来更有“编程感”。 - undefined

Answer 3

将您的.icon元素绝对定位在#map div内。 CSS

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

- Matvey Andreyev

---

这并没有回答问题的所有部分。 - Jonathan Lam