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

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

好吧，这里的问题是元素不会在页脚停下来。我试图寻找一个答案，该如何使用一些“ onsroll”选项使元素停在那里，但是没有任何普通的JS解决方案，因此为什么我选择该位置：sticky选项。

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

Answer 1

您正确的是，添加空格时要考虑到侧栏sticky的高度。当然，有很多方法可以解决此问题，但是我建议的最快/最少侵入式方法是在表上使用position: absolute：

.my-table {
        position: absolute;
        top: 0;
        margin-top: 50px;
        margin-left: 250px;
        margin-bottom: 3rem;
    }

Answer 2

您可以复习一下吗？

我只需在$existingConversation = Conversation::where([ [ 'sender_id', '=', $userIds[0] ], [ 'receiver_id', '=', $userIds[1] ] ])->orWhere([ [ 'sender_id', '=', $userIds[1] ], [ 'receiver_id', '=', $userIds[0] ] ])->first();中添加float:left;。

#sidebar

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;
}

Answer 3

您可以简单地在粘性元素上添加cmake-build-debug。但是不要忘记在内部元素上添加高度值，以免消失。另外，如果需要将元素移回，则可以添加height: 0

Answer 4

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

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

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

4 个答案: