css - 使用粘性位置删除不需要的空间

Question

我正在尝试使用 position: sticky在旋转的元素上，但我在顶部获得了额外的空间。在粘性元素必须停止的地方(在父元素的末尾)它也会向外移动。

请注意，我需要控制选择在粘性元素和左侧窗口之间放置多少像素。

检查 2 个屏幕截图以了解 2 个问题以及我想要实现的目标。

问题1:顶部有多余空间


问题 2:粘性元素在 部分的末尾超出


我正在使用这段代码:

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

这是 密码笔 完整代码: https://codepen.io/anon/pen/KLqJGG

我该如何解决这个问题？
谢谢

Answer 1

问题1:顶部有多余空间

粘性定位的元素保留在 DOM 流中 - 就像 relative定位元素可以。因此，那里的空间被 h1.section__title 占用。元素。

问题 2:粘性元素在 部分的末尾超出

这是因为，h1 的原始高度即使在旋转之后，仍会在那里考虑元素。

所以，你需要先确定sticky header的确切宽度(旋转后变成这个元素的高度)，然后为旋转元素的高度设置这个宽度值，如下:

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

密码笔: https://codepen.io/anon/pen/arybWZ

编辑:

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

知道了。如果高度是可变的，你可以试试这个:

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

实际操作: https://codepen.io/anon/pen/BedREm

这里有一个很好的解释它是如何工作的: Rotated elements in CSS that affect their parent's height correctly

编辑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?

是的，另一种甜蜜的选择，你可以使用。 :)

在这里，我对其进行了一些更改/优化: https://codepen.io/anon/pen/qGXPPe?editors=1100

但是，请注意 vertical-lr或 vertical-rl没有得到广泛支持。显然只在 桌面 Chrome/Firefox/Opera 版本。 See here .
所以，这取决于你，使用哪一个。就个人而言，我不会使用 writing-mode由于缺乏浏览器支持。