Remove unwanted space with position sticky

Question

I'm trying to use position: sticky on a rotated element but I get extra space at the top. Also where the sticky element has to stops (at the end of parent) it goes outside.

Notice I need to have control to choose how many pixels put between sticky element and the left window side.

Check the 2 screenshot to understand the 2 problems, and what I want to achieve.

Problem 1: extra space at top

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

I'm using this code:

HTML

<section class="section">

  <h1 class="section__title">STICKY</h1>

  <div class="container">
    <div class="row">
      <div class="col [ col-lg-8 offset-lg-2 ]">
        <div class="h4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quos illum aperiam officia provident, mollitia at, tempore atque, blanditiis sit optio esse harum officiis voluptas iusto sequi. Magni, reiciendis quidem.
        </div>
      </div>
    </div>
  </div>

</section>

CSS

.section__title {
  display: inline-block;
  transform: rotate(-90deg) translatex(-100%);
  transform-origin: 0% 0%; 
  margin-bottom: 0;

  position: sticky;
  top: 0;
  left: 50px;
}

Here is a Codepen with the entire code: https://codepen.io/anon/pen/KLqJGG

How can I solve this? Thanks

Answer 1

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.

Answer 2

Seems to me that your Codepen does not have that padding you mention, therefore I wonder if you removed the default padding and margin of html and body elements.

html, body {
    margin: 0;
    padding: 0;
}

Let me know if it works or in which browser the padding you mention appears.