How to remove an unwanted gap with position: sticky

Question

I have a small element with the following properties: "display: none" and "position: sticky". The element changes its display property from none to block on a button click. The problem is that when the element appears a white gap above my table also appears (I believe it is the space the sticky element occupies on the page).

Is there any possibility to remove the white space without sacrificing the sticky property of the element? I have tried making the parent element's position to relative/absolute but it didn't yield any positive results.

Here is the code:

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

"Why not use position: fixed instead?"

Well, the problem here is that the element won't stop at the footer. I have tried to look for an answer how to make the element stop there with some "onscroll" options but there aren't any vanilla JS solutions, hence why I opt for the position: sticky option.

If an answer to my question involves JS/jQuery, I very much more prefer vanilla JavaScript option.

Answer 1

You can simply add height: 0 to you sticky element.But don't forget to add height value to the inner elements to avoid disappearance. Also if you need move the element back you can add the transform: translateY(-elHeight)

Answer 2

can you please review this?

i just add float:left; in #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;
}

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