如何消除不想要的位置间隙：粘性

Question

我有一个具有以下属性的小元素：“显示：无”和“位置：粘性”。该元素将其显示属性从无更改为阻止单击按钮。问题是当元素出现时，我的表格上方也会出现一个白色间隙（我相信这是粘性元素在页面上占据的空间）。

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

代码如下：

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>

   

Codepen：https://codepen.io/Delest/pen/RwbyGLK

“为什么不使用位置：固定呢？”

嗯，这里的问题是元素不会在页脚处停止。我试图寻找一个答案，如何通过一些“onscroll”选项使元素停在那里，但没有任何 vanilla JS 解决方案，因此我选择 position: sticky 选项。

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

Answer 1

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

Answer 2

你能复习一下吗？

我只是在#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 3

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