如何去除不需要的位置间隙：粘性

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>

Answer 3

可能是“粘性”元素的父元素或祖先元素有“填充”，尝试删除它，可能没问题

Answer 4

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.