logo标签列表

有没有一种方法可以指定粘性子标题何时变得不粘性？

htmlcss
4

我正在使用CSS创建子标题，使其在滚动时保持固定位置，直到下一个子标题出现并将其推开，但是（因为我使用了旋转文本）我希望通过控制填充等方式来控制子标题何时变为“非固定”状态，以避免子标题重叠。以下是我的代码：

.itemblock {
  background-color:  red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.subcategory {
  border-left: solid 20px blue;
}

.subhead {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  color: white;
  display: block;
  height: 0px;
  scroll: hidden;
  top: 10px;
  left: -40px;
  margin-left: -18px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-20px);
}
<div class="subcategory">
  <div class="subhead">A</div>
  <div class="itemblock">Item A1</div>
  <div class="itemblock">Item A2</div>
  <div class="itemblock">Item A3</div>
  <div class="itemblock">Item A4</div>
  <div class="itemblock">Item A5</div>
  <div class="itemblock">Item A6</div>
  <div class="itemblock">Item A7</div>
  <div class="itemblock">Item A8</div>
  <div class="itemblock">Item A9</div>
</div>
<div class="subcategory">
  <div class="subhead">B</div>
  <div class="itemblock">Item B1</div>
  <div class="itemblock">Item B2</div>
  <div class="itemblock">Item B3</div>
  <div class="itemblock">Item B4</div>
  <div class="itemblock">Item B5</div>
  <div class="itemblock">Item B6</div>
  <div class="itemblock">Item B7</div>
  <div class="itemblock">Item B8</div>
  <div class="itemblock">Item B9</div>
</div>
<div class="subcategory">
  <div class="subhead">C</div>
  <div class="itemblock">Item C1</div>
  <div class="itemblock">Item C2</div>
  <div class="itemblock">Item C3</div>
  <div class="itemblock">Item C4</div>
  <div class="itemblock">Item C5</div>
  <div class="itemblock">Item C6</div>
  <div class="itemblock">Item C7</div>
  <div class="itemblock">Item C8</div>
  <div class="itemblock">Item C9</div>
</div>

如果您向上滚动，您会看到“ A”副标题一直保持固定，直到“ B”副标题出现，但两者会重叠一段时间。我希望能够使“ A”标题变得不固定，因此它似乎停留在自己的蓝色区域内。
当然，较长的标题问题更加复杂： 

.itemblock {
  background-color:  red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.subcategory {
  border-left: solid 20px blue;
}

.subhead {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  color: white;
  display: block;
  height: 0px;
  scroll: hidden;
  top: 10px;
  left: -40px;
  margin-left: -18px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-80px);
}
<div class="subcategory">
  <div class="subhead">Subhead A</div>
  <div class="itemblock">Item A1</div>
  <div class="itemblock">Item A2</div>
  <div class="itemblock">Item A3</div>
  <div class="itemblock">Item A4</div>
  <div class="itemblock">Item A5</div>
  <div class="itemblock">Item A6</div>
  <div class="itemblock">Item A7</div>
  <div class="itemblock">Item A8</div>
  <div class="itemblock">Item A9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead B</div>
  <div class="itemblock">Item B1</div>
  <div class="itemblock">Item B2</div>
  <div class="itemblock">Item B3</div>
  <div class="itemblock">Item B4</div>
  <div class="itemblock">Item B5</div>
  <div class="itemblock">Item B6</div>
  <div class="itemblock">Item B7</div>
  <div class="itemblock">Item B8</div>
  <div class="itemblock">Item B9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead C</div>
  <div class="itemblock">Item C1</div>
  <div class="itemblock">Item C2</div>
  <div class="itemblock">Item C3</div>
  <div class="itemblock">Item C4</div>
  <div class="itemblock">Item C5</div>
  <div class="itemblock">Item C6</div>
  <div class="itemblock">Item C7</div>
  <div class="itemblock">Item C8</div>
  <div class="itemblock">Item C9</div>
</div>

我认识到这可能过分地推动了CSS的能力。如果可能，我真的很想避免使用任何JavaScript，但如果必须采用这种方法，我会这样做。

有什么建议吗？

2个回答
4
您可以使用z-index来解决这个问题:
  1. 给.subcategory添加position: relative，以确保我们可以应用z-index
  2. 给.subcategory添加z-index: 1
  3. 给.subhead添加z-index: 2

.itemblock {
  background-color:  red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.subcategory {
  border-left: solid 20px blue;
  position: relative;
  z-index: 1;
}

.subhead {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  color: white;
  display: block;
  height: 0px;
  scroll: hidden;
  top: 10px;
  left: -40px;
  margin-left: -18px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-80px);
  z-index: 2;
}
<div class="subcategory">
  <div class="subhead">Subhead A</div>
  <div class="itemblock">Item A1</div>
  <div class="itemblock">Item A2</div>
  <div class="itemblock">Item A3</div>
  <div class="itemblock">Item A4</div>
  <div class="itemblock">Item A5</div>
  <div class="itemblock">Item A6</div>
  <div class="itemblock">Item A7</div>
  <div class="itemblock">Item A8</div>
  <div class="itemblock">Item A9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead B</div>
  <div class="itemblock">Item B1</div>
  <div class="itemblock">Item B2</div>
  <div class="itemblock">Item B3</div>
  <div class="itemblock">Item B4</div>
  <div class="itemblock">Item B5</div>
  <div class="itemblock">Item B6</div>
  <div class="itemblock">Item B7</div>
  <div class="itemblock">Item B8</div>
  <div class="itemblock">Item B9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead C</div>
  <div class="itemblock">Item C1</div>
  <div class="itemblock">Item C2</div>
  <div class="itemblock">Item C3</div>
  <div class="itemblock">Item C4</div>
  <div class="itemblock">Item C5</div>
  <div class="itemblock">Item C6</div>
  <div class="itemblock">Item C7</div>
  <div class="itemblock">Item C8</div>
  <div class="itemblock">Item C9</div>
</div>

这实际上非常有创意：它利用了.subhead文本颜色与背景相匹配的事实。我真正想做的是在.subhead之间创建一个缓冲区，以便文本似乎被限制在.subcategory的垂直边界内。但你的解决方案绝对比我发布的要好得多。 - TobyRush
1
好的，我已经想到了一种使它工作的方法： .subhead 的高度决定了它何时开始滚动，但我将其设置为0，这样我的第一个.itemblock 就与.subcategory 顶部齐平。
由于增加高度给了我所需的缓冲区，因此我这样做了，但是在第一个.itemblock 上放置了负margin-top 来进行补偿。 

.itemblock {
  background-color:  red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.itemblock:nth-child(2) {    /* added this to counteract         */
                             /* the increased height in .subhead */
  margin-top: -100px;
}

.subcategory {
  border-left: solid 20px blue;
  position: relative;
  z-index: 1;
}

.subhead {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  color: white;
  display: block;
  height: 100px;    /* increased height here from 0px                  */
                    /* height will depend on the length of the subhead */
  scroll: hidden;
  top: 10px;
  left: -40px;
  margin-left: -18px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-80px);
  z-index: 2;
}
<div class="subcategory">
  <div class="subhead">Subhead A</div>
  <div class="itemblock">Item A1</div>
  <div class="itemblock">Item A2</div>
  <div class="itemblock">Item A3</div>
  <div class="itemblock">Item A4</div>
  <div class="itemblock">Item A5</div>
  <div class="itemblock">Item A6</div>
  <div class="itemblock">Item A7</div>
  <div class="itemblock">Item A8</div>
  <div class="itemblock">Item A9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead B</div>
  <div class="itemblock">Item B1</div>
  <div class="itemblock">Item B2</div>
  <div class="itemblock">Item B3</div>
  <div class="itemblock">Item B4</div>
  <div class="itemblock">Item B5</div>
  <div class="itemblock">Item B6</div>
  <div class="itemblock">Item B7</div>
  <div class="itemblock">Item B8</div>
  <div class="itemblock">Item B9</div>
</div>
<div class="subcategory">
  <div class="subhead">Subhead C</div>
  <div class="itemblock">Item C1</div>
  <div class="itemblock">Item C2</div>
  <div class="itemblock">Item C3</div>
  <div class="itemblock">Item C4</div>
  <div class="itemblock">Item C5</div>
  <div class="itemblock">Item C6</div>
  <div class="itemblock">Item C7</div>
  <div class="itemblock">Item C8</div>
  <div class="itemblock">Item C9</div>
</div>

这有点笨拙，因为它不会自动匹配文本的宽度，但它可以工作。
如果您在这篇文章和原始帖子之间加入了差异，或者至少在更改处添加了一些注释，例如 /*changed*/，那将会很有帮助。 - Stephen P
好主意，谢谢。我已经在代码中添加了一些注释。 - TobyRush
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接