Css 用位置粘滞去除不需要的空间

我试图在旋转的元素上使用

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>

下面是一个包含完整代码的代码笔：

我怎样才能解决这个问题？

---

谢谢

在我看来，您的代码笔没有您提到的填充，因此我想知道您是否删除了

html

和

body

元素的默认填充和边距

html，正文{
保证金：0；
填充：0；
}

---

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

问题1：顶部有多余空间

粘性定位的元素保留在DOM流中-就像

相对定位的元素一样。因此，这里的空间被
h1.section\u title
元素占据

问题2：粘性元素在部分末尾超出范围

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

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

$section粘性收割台高度：145px；
.章节标题{
显示：内联块；
页边距底部：0；
变换原点：0%0%；
位置：粘性；
排名：0；
左：50px；
/*解决问题1*/
浮动：左；
/*解决问题2*/
变换：旋转（-90度）translatex（$section sticky header height）；
高度：$节粘性收割台高度；
}

代码笔：


编辑：

问题是我无法确定粘性标题的确切宽度，因为h1文本是可变的（客户端将通过CMS插入该文本）。有办法解决这个问题吗？如果可能，不使用Javascript

明白了。如果高度是可变的，您可以尝试以下操作：


粘性的

。章节标题{
边框：1px实心；//用于演示
位置：粘性；
排名：0；
浮动：左；
.外部旋转{
显示：表格；
位置：相对位置；
左：50px；
.内部旋转{
填充：50%0；
身高：0；
.轮换{
变换原点：0；
变换：旋转（-90度）平移（-100%）；
利润率最高：-50%；
空白：nowrap；
}
}  
}
}

见行动：

这里有一个很好的解释来解释它是如何工作的：


编辑2：

在这个链接上，我还发现了
的写作模式：垂直rl属性（在这个答案中为stackoverflow.com/a/50406895/1252920）。你认为这是一个更好的解决方案吗？我在这个代码笔中应用了它：Codepen.io/anon/pen/JqyJWK？editors=1100你认为呢

是的，另一个甜蜜的选择，你可以使用。：）

在这里，我对其进行了一些更改/优化：

但是，请注意，
垂直lr
或
垂直rl
没有得到广泛支持。显然只有在桌面版的Chrome/Firefox/Opera上。
所以，这取决于你，使用哪一个。就个人而言，由于缺乏浏览器支持，我不会使用
编写模式。
我尝试添加您的CSS代码，但没有任何更改。我在每个浏览器（Chrome、Firefox、Safari）上都能看到这些问题。你确定知道我遇到的问题是什么吗？对不起，我不知道我是怎么看的，但我以为你想要实现不同的目标。我能够删除不需要的填充的唯一方法是向.container类添加负的上边距，请检查此项。如果对你有用的话，我也会在答案中加上它。是的，我已经考虑过用“硬编码”的方法来移动容器，但我认为它们是脏的。希望有更好的解决办法。我还有第二个问题（查看我问题帖子中的第二个屏幕截图）。Thanks@FredK我还更新了底部填充的。我想知道是否有更干净的解决方案，但是你想要去除的填充物实际上是粘性元素的高度。好了，我们就快到了。问题是我无法确定粘性标题的确切宽度，因为h1文本是可变的（客户端将通过CMS插入该文本）。有办法解决这个问题吗？如果没有JavaScript（如果没有其他解决方案，我们会考虑）哦，伙计，你所做的就是纯粹的巫术！我只了解一部分。谢谢只有一件事：我注意到
.section\u title
上左边的
边距将移动
.container
，而它应该保持独立于粘性元素。可能吗？嗯，很抱歉。我更新了我的答案。删除左边的空白。新增
位置：相对；左：50px
至
。外部旋转
。应该可以。@FredK请查看我添加的链接以获得详细解释。：）哇，太棒了！非常感谢！在这个链接上，我还发现了
的写作模式：垂直rl属性（在此答案中）。你认为这是一个更好的解决方案吗？我把它用在这个代码笔上：你觉得呢？
.section__title {
  display: inline-block;
  transform: rotate(-90deg) translatex(-100%);
  transform-origin: 0% 0%; 
  margin-bottom: 0;

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