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元素的原始高度仍被认为是在那里。

因此，您需要首先确定粘性标头的确切宽度（旋转后，该宽度即变为该元素的高度），然后为旋转元素的高度设置此宽度值，如下所示：

$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插入该文本）。有办法解决吗？如果可能的话，没有Java语言

知道了。如果高度可变，则可以尝试以下方法：

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

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

粘住位置，去除多余的空间

2 个答案: