Remove Unwanted Space with Position Sticky

Remove unwanted space with position sticky

Problem 1: extra space at top

The stickily positioned element stays in the DOM flow - just like a relative positioned element does. So, hence the space there, which is occupied by the h1.section__title element.

Problem 2: sticky element goes outside at the end of section

It is because, the original height of the h1 element is still considered there, even after rotation.

So, you need to determine the exact width of the sticky header (which then becomes the height of this element after rotation) first and then set this width value for the rotated element's height, as follows:

$section-sticky-header-height: 145px;

.section__title {
  display: inline-block;
  margin-bottom: 0;
  transform-origin: 0% 0%; 
  position: sticky;
  top: 0;
  left: 50px;

  /* solves problem 1 */
  float: left; 

  /* solves problem 2 */
  transform: rotate(-90deg) translatex(-$section-sticky-header-height);
  height: $section-sticky-header-height;
}

Codepen: https://codepen.io/anon/pen/arybWZ

---

Edit:

The problem is that I cannot determine the exact width of the sticky header because the h1 text is variable (the client will insert that text via a CMS). Is there a way to handle this? If possible without Javascript

Got it. You can try this instead, if the height is variable:

<h1 class="h1 mb-0 section__title">
  <div class="rotation-outer">
    <div class="rotation-inner">
      <div class="rotation">
        STICKY
      </div>
    </div>
  </div>
</h1>

.section__title {
  border: 1px solid; // for demo purpose
  position: sticky;
  top: 0;
  float: left;

  .rotation-outer {
    display: table;
    position: relative;
    left: 50px;

    .rotation-inner {
      padding: 50% 0;
      height: 0;

      .rotation {
        transform-origin: 0 0;
        transform: rotate(-90deg) translate(-100%);
        margin-top: -50%;
        white-space: nowrap; 
      }
    }  
  }
}

See in action: https://codepen.io/anon/pen/BedREm

There's a very good explanation here for how this works: Rotated elements in CSS that affect their parent's height correctly

---

Edit 2:

At that link I also discovered the writing-mode: vertical-rl; property (in this answer stackoverflow.com/a/50406895/1252920). Do you think could be a better solution? I applied it in this Codepen: codepen.io/anon/pen/JqyJWK?editors=1100 What do you think?

Yes, another sweet alternative, you can use. :)

Here I changed/optimized it a little bit: https://codepen.io/anon/pen/qGXPPe?editors=1100

However, please note that vertical-lr or vertical-rl is not widely supported. Apparently only on desktop version of Chrome/Firefox/Opera. See here.
So, it's up to you, which one to use. Personally, I wouldn't use writing-mode due to lack of browser support.

How to remove an unwanted gap with position: sticky

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>

Removing whitespace at bottom of a page when using a sticky image

You can remove it using negative margin equal to the height. That space is the space of the image since position:sticky will keep the element part of the flow:

.footer-logo {  position: sticky;  bottom: 50px;  z-index: 100;  padding: 25px;  width: 100px;  height: 100px;  background-color: green;  float: right;}
.flex-container {  height: 400px;  display: flex;  flex-wrap: wrap;  background-color: #f2f2f2;  padding-top: 20px;  justify-content: center;  margin-bottom: -150px;}

<div class="flex-container"></div><img class="footer-logo" src="https://placehold.it/100x100">

position: sticky adds some space around element in Chrome

Now I can see what you are trying to say, box:shadow is evil in this case. I assume you can't remove this, so I have added overflow:hidden in body css.
have a look at the snippet below.

body {  margin: 0;  overflow:hidden;  background: red}
header {  display: block;  height: 44px;  background: #263238;  color: #fafafa;  padding: 2px 8px;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);  white-space: nowrap;  overflow-x: auto;  overflow-y: hidden;}
header.sticky {  position: -webkit-sticky;  position: sticky;  z-index: 1101;  top: 0;}

<p>Blah blah</p>
<header class="sticky">   <button>Home</button>   <button>About</button></header>
<!-- some spacing to allow users to scroll the page --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

How to remove whitespace that appears after relative positioning an element with CSS

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext {    width:400px;    background:yellow;    border: 1px dashed red;    margin:50px;    padding:5px;    font-weight:bold;}.whiteblob{    position:relative;    top:-140px;    left:70px;    width:200px;    height:50px;    margin-bottom:-50px;    border: 4px solid green;    background:white;    font-size:2.5em;    color:red;    }.footerallowedwhitespaceinblue{    height:10px;    background-color:blue;}.footer{    background-color:grey;    height:200px;}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script></div><div class="whiteblob">     buy this!</div><div class="footerallowedwhitespaceinblue"></div><div class="footer"></div>

---

Related Topics