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

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

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

傻图：

  _____________________________
  |         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");
  }

});

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

解决方法:

为了达到你想要的效果,我做了三个改变：

1.向上移动图标

您可以使用一个简单的margin-top：28px将其移动到一半(它的总高度和填充为56px)或使用transform：translateY(-50％)(奖励积分).

2.防止图标透明.

透明度是由溢出引起的：隐藏在由animate()jQuery函数引起的#map元素中.添加溢出：#map元素可见.

3.完全隐藏#map

只需在CSS和JS中将高度更改为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

标签：jquery,javascript,css,semantic-ui,html
来源： https://codeday.me/bug/20190527/1164733.html