Javascript 如何消除位置不需要的间隙：粘滞

我有一个具有以下属性的小元素：“display:none”和“position:sticky”。单击按钮后，图元将其显示特性从“无”更改为“块”。问题是，当元素出现时，我的表上方也会出现一个白色的间隙（我相信这是粘滞元素在页面上占据的空间）

是否有可能在不牺牲元素粘性的情况下删除空白？我尝试将父元素的位置设置为相对/绝对，但没有产生任何积极的结果

代码如下：

函数showSettings（）{
var sidebar=document.getElementById（“sidebar”）；
sidebar.style.display=“block”；
}
函数关闭设置（）{
var sidebar=document.getElementById（“sidebar”）；
sidebar.style.display=“无”；
}

#侧边栏{
显示：无；
位置：粘性；
职位：-网络工具包粘性；
左：10px；
最高：50%；
最大宽度：150px；
背景：rgba（204204204,0.493）；
}
.我的桌子{
边缘顶部：50px；
左边距：250像素；
边缘底部：3rem；
}
保险商实验室{
文本对齐：开始；
}
.我的btn{
背景：红色；
边界：无；
颜色：白色；
}
#侧边栏h4{
文本对齐：居中；
}
.table div{
高度：900px；
}

快速菜单：

关闭

快捷菜单
在此处填写输入：
示例文本
示例结束。
按钮1
按钮2
按钮3

您能回顾一下吗

我只添加了

float:left在
#侧栏中


函数showSettings（）{
var sidebar=document.getElementById（“sidebar”）；
sidebar.style.display=“block”；
}
函数关闭设置（）{
var sidebar=document.getElementById（“sidebar”）；
sidebar.style.display=“无”；
}
#侧边栏{
显示：无；
浮动：左；
位置：粘性；
职位：-网络工具包粘性；
左：10px；
最高：50%；
最大宽度：150px；
背景：rgba（204204204,0.493）；
}
.我的桌子{
边缘顶部：50px；
左边距：250像素；
边缘底部：3rem；
}
保险商实验室{
文本对齐：开始；
}
.我的btn{
背景：红色；
边界：无；
颜色：白色；
}
#侧边栏h4{
文本对齐：居中；
}
.table div{
高度：500px；
}

快速菜单：

关闭

快捷菜单
在此处填写输入：
示例文本
示例结束。
按钮1
按钮2
按钮3
您只需将
高度：0
添加到粘滞元素中即可。但不要忘记将高度值添加到内部元素中以避免消失。此外，如果您需要将元素向后移动，您可以添加
transform:translateY（-elHeight）
Welcome@KrzysztofDelestowicz，并请用up vote完成您的问题。我的答案将帮助我成长。您可能知道为什么向下滚动时，粘性导航中的元素会变得模糊吗？我无法生成问题，我认为这可能是因为图形卡问题……如果你用谷歌搜索“定位粘性模糊文本”，你就会看到我所说的问题。如果我设置位置：固定，那么就没有模糊，所以这不是图形卡问题。