删除不需要的空间并粘贴位置

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

这是一个带有完整代码的 Codepen：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;
}

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

---

编辑：

问题是我无法确定粘性标题的确切宽度，因为 h1 文本是可变的（客户端将通过 CMS 插入该文本）。有没有办法处理这个？如果可能没有 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：

在该链接上，我还发现了 writing-mode: vertical-rl; 属性（在此答案中为 stackoverflow.com/a/50406895/1252920）。你认为可能是一个更好的解决方案吗？我在这个 Codepen 中应用了它：codepen.io/anon/pen/JqyJWK?editors=1100 你怎么看？

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

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

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

Answer 2

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

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

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