删除不需要的 space 位置粘

Question

我试图在旋转的元素上使用 position: sticky，但我在顶部得到了额外的 space。同样，粘性元素必须停止的地方（在父元素的末尾）它会走到外面。

注意我需要控制来选择粘性元素和左侧 window 之间放置的像素数。

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

问题 1：顶部有额外的 space

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

这里是一个 Codepen 完整代码：https://codepen.io/anon/pen/KLqJGG

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

Answer 1

在我看来，您的 Codepen 没有您提到的填充，因此我想知道您是否删除了 html 和 body 元素的默认填充和边距。

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

让我知道它是否有效或您提到的填充出现在哪个浏览器中。

Answer 2

问题 1：顶部有多余的 space

粘性定位元素停留在 DOM 流中——就像 relative 定位元素一样。因此，因此 space 被 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 whosebug.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?

是的，另一个不错的选择，你可以使用。 :)

这里我changed/optimized稍微说一下：https://codepen.io/anon/pen/qGXPPe?editors=1100

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

删除不需要的 space 位置粘

Remove unwanted space with position sticky

css

sticky