求助：实现点击fixed按钮弹出底部向上滑入的非侵入式div

修正后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec-menu">
  <button id="sec-menu">Menu</button>
  <div class="sec-menu-div">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
  </div>
</div>

CSS #

.sec-menu {
  position: fixed;
  z-index: 777;
  width: auto;
  height: auto;
  bottom: 0;
  background-color: chartreuse;
  left: 50%;
  transform: translateX(-50%);
}

.sec-menu button {
  padding: 5px 50px;
}

.sec-menu-div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  max-width: 50%;
  height: auto;
  padding: 20px;
  font-size: 20px;
  z-index: 776;
  color: white;
  background-color: darkgoldenrod;
  border-radius: 5px 5px 0 0;
  transition: transform 0.4s ease;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  bottom: 0;
}

.sec-menu-div.active {
  transform: translateX(-50%) translateY(0);
}

JavaScript #

$('#sec-menu').click(function() {
  $('.sec-menu-div').toggleClass("active");
});

关键修改说明 #

• 滑入逻辑调整：把弹窗初始状态设为transform: translateY(100%)，让它完全隐藏在屏幕底部外，激活时通过translateY(0)实现向上滑入，完美贴合需求。
• 定位优化：弹窗改用fixed定位并锚定底部，彻底脱离文档流，不会影响页面其他内容布局。
• 层级与交互优化：弹窗的z-index设为比按钮低，避免遮挡按钮导致无法再次点击关闭；同时调整圆角样式，让弹窗和按钮视觉上更贴合。
• 性能优化：将过渡属性从all改为仅transform，减少不必要的样式计算，动画更流畅。

内容的提问来源于stack exchange，提问作者Chhailbihari Pandey