Javascript 顶部的HTML CSS拖拽条幻灯片可显示更多信息

所以我想要一个显示在屏幕底部的条，当点击时，它向上滑动以显示一些更详细的信息，然后再次点击它以向下滑动。这很难解释

这是一张显示它的图片。单击此按钮后，我想将其向上滑动，并在屏幕（有点像覆盖图）中填充有关您订单的信息（例如价格来源），然后再次单击以向下滑动

---

我不知道这叫什么，因此我很难找到类似的东西！因此，像这样的链接是非常感谢。如果可以的话，请帮忙。谢谢。

这属于“非画布模型”类别，您可以使用类创建一个div，比如说

。订单摘要

，并使用以下设置：

。订单摘要{
位置：固定；
顶部：calc（100vh-80px）；
}

在计算

top

时，减去的

80px

是根据屏幕截图显示的div的可见高度（您可以更新确切高度，我只是粗略估计）

---

您可以使用一个按钮，用简单的JavaScript切换

top

属性。

您可以使用jQuery和CSS轻松创建此效果，只需创建一张隐藏的卡片及其父溢出，然后根据需要移动卡片

$（文档）.ready（函数（）{
$（'.bar'）。单击（函数（）{
$（'.card'）.toggleClass（“showMe”）；
});
});
.wrapper{
溢出：隐藏；
高度：175px；
宽度：200px；
边框：1px实心#ccc；
位置：相对位置；
}
.卡片{
位置：绝对位置；
最高：75%；
过渡：前0.5s；
}
.卡.给我看看{
顶部：10px；
}
.shownInfo{display:flex；justify content:space between；}
.酒吧{
高度：8px；
宽度：50%；
边界半径：5px；
背景色：#333；
保证金：0自动；
光标：指针；
}

您点的菜

123美元

在这里展示你想要什么。
这种类型的组件通常出现在移动应用程序中

它可以在web应用程序中使用vanilla javascript实现。您所需要的只是一个绝对定位的元素，单击该元素时会向上移动


const slider=document.querySelector（'.slider'）；
const sliderHead=document.querySelector（'.slider.head'）；
slider.addEventListener（'单击'，（）=>{
slider.classList.toggle（'slideUp'）；
});
//最初，仅从页面底部显示滑块头部
功能设置滑块位置（滑块）{
让sliderPaddingTop=parseInt（window.getComputedStyle（slider.paddingTop））；
常量偏移=slider.offsetHeight-sliderHead.offsetHeight-sliderAddingtop；
slider.style.bottom=`-${offset}px`；
}
设置滑块位置（滑块）
p，h2{margin:0；}
正文{溢出：隐藏；背景：#eee；}
.滑块，
.滑块：：之前{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
边界半径：10px；
}
.滑块{
背景：#fff；
填充：20px；
宽度：80%；
光标：指针；
过渡：底部0.4s；
长方体阴影：0.3pxRGBA（0,0,0,0.2）；
框大小：边框框；
}
斯莱德普先生{
底部：0！重要；
}
.滑块：：之前{
内容：''；
背景：#eee；
宽度：75px；
高度：5px；
顶部：8px；
}
.头{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
高度：50px；
边缘底部：15px；
}

您点的菜
$123
更多信息：
所有人都有一个明确的认识，那就是错误的存在

问题是什么？您是否只是想找到这种元素样式的名称？或者你正在寻找一个为你做这件事的图书馆？（这两个都与StackOverflow的主题相对脱节，但我们可以为您指出另一个站点）如果您想自己尝试构建此站点，如果您将代码包括在问题中，我们将很乐意帮助您解决遇到的任何问题。基本上，做这件事的最佳方法是什么，一个类似的例子或链接可以回答我的问题！我会考虑使用
fixed
定位，相对于视口的底部（例如
bottom:-90px
会在屏幕外隐藏大部分100px高的元素）。然后您可以有一个可切换类，该类将底部偏移量调整为0（或更多），以使内容可见。@DBS此类分区的高度可能是可变的，也可能包含可滚动区域。我认为使用
top
会更好，因为我们随时都知道可见区域的高度。