我有一个具有以下属性的小元素：“显示：无”和“位置：粘性”。该元素将其显示属性从无更改为阻止按钮单击。问题是当元素出现时，我的表格上方也会出现一个白色间隙（我相信这是粘性元素在页面上占据的空间）。
有没有可能在不牺牲元素的粘性的情况下删除空白？我曾尝试将父元素的位置设置为相对/绝对，但没有产生任何积极的结果。
这是代码：
function showSettings() {
var sidebar = document.getElementById("sidebar");
sidebar.style.display = "block";
}
function closeSettings() {
var sidebar = document.getElementById("sidebar");
sidebar.style.display = "none";
} #sidebar {
display: none;
position: sticky;
position: -webkit-sticky;
left: 10px;
top: 50%;
max-width: 150px;
background: rgba(204, 204, 204, 0.493);
}
.my-table {
margin-top: 50px;
margin-left: 250px;
margin-bottom: 3rem;
}
ul {
text-align: start;
}
.my-btn {
background: red;
border: none;
color: white;
}
#sidebar h4 {
text-align: center;
}
.table-div {
height: 900px;
}<div …是否有可能在每次单击按钮/图标（除了第一个带有标题的按钮/图标）时打乱表格行并使它们随机出现？类似于 w3schools 的“如何对表进行排序”（https://www.w3schools.com/howto/howto_js_sort_table.asp），但表会随机排序。
另一种可能性是使用 JavaScript 数组排序，但我不知道如何使表行显示为数组的内容。
https://jsfiddle.net/17bjxgfa/1/
我更喜欢普通的 JS 解决方案而不是 jQuery。
这是我们可以使用的示例表：
.table-div {
padding-top: 1rem;
}<div class="table-div">
<table id="myTable">
<tr>
<th class="button"><button class="my-btn" type="button" onclick="sortTable()">
shuffle</button></th>
<th>Text:</th>
<th></th>
</tr>
<tr>
<td class="left">Some text 1</td>
<td><input type="text"></td>
<td class="right">more text.</td>
<td class="button"><button class="my-btn" type="button">
check</button></td>
</tr>
<tr>
<td class="left">Some text 2</td>
<td><input type="text"></td>
<td class="right">more text.</td>
<td class="button"><button class="my-btn" type="button">
check</button></td>
</tr>
<tr>
<td class="left">Some text 3</td>
<td><input type="text"></td>
<td class="right">more text.</td>
<td class="button"><button class="my-btn" type="button">
check</button></td> …