如何用 position: sticky 删除不需要的间隙

Question

我有一个具有以下属性的小元素："display: none" 和 "position: sticky"。该元素将其显示属性从 none 更改为阻止单击按钮。问题是，当元素出现时，我的 table 上方的白色间隙也会出现（我相信这是 space 粘性元素在页面上占据）。

有没有可能在不牺牲元素的粘性属性的情况下去除白色space？我尝试将父元素的位置设置为 relative/absolute，但没有产生任何积极的结果。

代码如下：

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 class="table-div">
  <nav id="sidebar">
      <h4>Quick menu:</h4>
        <ul>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <button class="my-btn" onclick="closeSettings()">close</button>
        </ul>
      </nav>
<table class="my-table" id="myTable">
    <tr>
        <th class="button"><button id="settings" type="button" onclick="showSettings()">Quick Menu</button></th>
        <th>Fill input here:</th>
        <th></th>
    </tr>

    <tr>
        <td>Example text</td>
        <td><input type="text"></td>
        <td>Example end.</td>
       <td><button  type="button">
            Button 1</button></td>
        <td><button  type="button">
            Button 2</button></td>
        <td><button  type="button">
            Button 3</button></td>
      </tr>
  <tr>

  </tr>
  </table>
</div>

代码笔：https://codepen.io/Delest/pen/RwbyGLK

"Why not use position: fixed instead?"

好吧，这里的问题是元素不会停在页脚处。我试图寻找一个答案，如何使用一些 "onscroll" 选项让元素停在那里，但没有任何普通的 JS 解决方案，因此我选择位置：粘性选项。

如果我的问题的答案涉及 JS/jQuery，我更喜欢普通的 JavaScript 选项。

Answer 1

你能评论一下吗？

我只是在#sidebar中添加float:left;。

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;
  float:left;
    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: 500px;
}

<div class="table-div">
  <nav id="sidebar">
      <h4>Quick menu:</h4>
        <ul>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <a href="#">Secondary nav</a>
          <button class="my-btn" onclick="closeSettings()">close</button>
        </ul>
      </nav>
<table class="my-table" id="myTable">
    <tr>
        <th class="button"><button id="settings" type="button" onclick="showSettings()">Quick Menu</button></th>
        <th>Fill input here:</th>
        <th></th>
    </tr>

    <tr>
        <td>Example text</td>
        <td><input type="text"></td>
        <td>Example end.</td>
       <td><button  type="button">
            Button 1</button></td>
        <td><button  type="button">
            Button 2</button></td>
        <td><button  type="button">
            Button 3</button></td>
      </tr>
  <tr>

  </tr>
  </table>
</div>

Answer 2

你可以简单地添加height: 0到你的粘性element.But不要忘记为内部元素添加高度值以避免消失。此外，如果您需要将元素移回原位，您可以添加 transform: translateY(-elHeight)

Answer 3

可能是“sticky”元素的父元素或祖先元素有“padding”，尝试去掉它，可能没问题

如何用 position: sticky 删除不需要的间隙

How to remove an unwanted gap with position: sticky

html

javascript

css

position

sticky

"Why not use position: fixed instead?"