Javascript 如何隐藏一个元素，并且仍然能够转换它，并且在它里面有粘性的东西？

按下按钮时，我试图通过将其高度从0转换为

pads

元素的高度来取消隐藏

pads\u和\u pool

元素

同时，我希望

pool

元素是粘性的，因此它上面的

位置：sticky

和

top:0

但是，这将不起作用，因为在

焊盘和焊盘池

上设置了

溢出：隐藏

是否有任何其他方法（允许粘性）最初隐藏

pads\u和\u pool

元素，并在按下按钮时仍能将其转换到所需高度

最好，我希望避免将溢出更改为

滚动

，或从flexbox中删除

池

元素

我正在寻找CSS或JS解决方案

let fill\u btn=document.getElementById（'unhide'））
填充\u btn.addEventListener（'单击'，取消隐藏\u焊盘\u和\u池）
函数unhide_pads_和_pool（）{
让pads=document.getElementById（'pads'））
让pads\u和\u pool=document.getElementById（'pads\u和\u pool'））
pads_和pool.style.height=pads.offsetHeight+'px'
}

#pads_和_池{
身高：0；
溢出：隐藏；
背景：灰色；
显示器：flex；
证明内容：之间的空间；
过渡：高度2s；
}
#垫子{
高度：5000px；
宽度：500px；
背景：橙色；
}
#水池{
位置：粘性；
排名：0；
高度：150像素；
宽度：150px；
背景：粉蓝；
}

Unhide pad和pool
垫
水塘

您可以侦听并删除溢出：隐藏图元完成其高度转换后：

let fill_btn=document.getElementById（'unhide'）；
填充添加的监听器（'单击'，取消隐藏垫和池）；
函数handleTransitionEnd（事件）{
event.target.style.overflow='visible'；
event.target.removeEventListener（'transitionend'，HandletTransitionEnd）；
}
函数unhide_pads_和_pool（）{
让pads=document.getElementById（'pads'）；
让pads_和_pool=document.getElementById（'pads_和_pool'）；
pads_和pool.addEventListener（'transitionend'，HandletTransitionEnd）；
pads_和pool.style.height=pads.offsetHeight+'px'
}

#pads_和_池{
身高：0；
溢出：隐藏；
背景：灰色；
显示器：flex；
证明内容：之间的空间；
过渡：高度2s；
}
#垫子{
高度：5000px；
宽度：500px；
背景：橙色；
}
#水池{
位置：粘性；
排名：0；
高度：150像素；
宽度：150px；
背景：粉蓝；
}

Unhide pad和pool
垫
水塘

如果元素的父元素（直接/间接）的溢出属性设置不是默认值（可见），则“位置粘性”将不起作用

此值始终创建新的堆叠上下文。请注意，粘性元素“粘滞”到其最近的具有“滚动机制”（在溢出隐藏、滚动、自动或覆盖时创建）的祖先，即使该祖先不是最近的实际滚动祖先。这有效地抑制了任何“粘性”行为（参见W3C CSSWG上的Github问题）

因此，我建议的解决方案是，一旦取消隐藏容器，只需将溢出值更改为默认值，即可见

let fill\u btn=document.getElementById（'unhide'））
填充\u btn.addEventListener（'单击'，取消隐藏\u焊盘\u和\u池）
函数unhide_pads_和_pool（）{
让pads=document.getElementById（'pads'））
让pads\u和\u pool=document.getElementById（'pads\u和\u pool'））
pads_和pool.style.height=pads.offsetHeight+'px'；
pads_和_pool.style.overflow='可见'；
}

#pads_和_池{
身高：0；
溢出：隐藏；
背景：灰色；
显示器：flex；
证明内容：之间的空间；
过渡：高度2s；
}
#垫子{
高度：5000px；
宽度：500px；
背景：橙色；
}
#水池{
位置：粘性；
排名：0；
高度：150像素；
宽度：150px；
背景：粉蓝；
}

Unhide pad和pool
垫
水塘

谢谢，这很好，但如果在展开的div下面还有一个div，则会造成一些不愉快的影响。因此，我会将另一个解决方案标记为最佳解决方案，但这是您的解决方案！谢谢，这是一个很好的解决方案，因为当在expaned下面有一个div时，它会起作用。