有没有办法指定粘性子标题何时变为不粘？

时间：2017-08-30 21:32:01

标签： html css

我正在使用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 个答案:

答案 0 :(得分：4)

您可以使用z-index来解决此问题：

  1. 向position: relative添加了.subcategory，以确保我们可以应用z-index
  2. 将z-index: 1添加到.subcategory
  3. 将z-index: 2添加到.subhead

    4. ＆＃13;
    ＆＃13; 
    .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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：1)

好的，我找到了一种方法让它工作：.subhead的高度决定它什么时候开始滚动，但我把它设置为0以便我的第一个.itemblock将与.subcategory的顶部齐平。

因为增加高度给了我所需的缓冲区，但是我这样做了，但是在第一个margin-top上放了一个负.itemblock来解释它。

.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>

这是一个小小的kludgy，因为它不会自动匹配文本的宽度，但它可以工作。

相关问题
最新问题