All geek questions in one place

Is there a way to indicate when sticky subtitles come off?

I use CSS to create subheadings that remain stuck while scrolling until the next subheading pops up and pushes it, but (because I'm using rotated text). I would like to somehow control (through registration, maybe?) When the subtitle begins to “peel off” so that the subtitles do not overlap. Here is what I have:

.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>
Run codeHide result

If you scroll up the page, you will see that the subtitle “A” is stuck until the subtitle “B” appears, but two overlays for a moment. I would like the heading “A” to peel off so that it stays inside its own blue area.

Of course, the problem is compounded by longer headings:

.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>
Run codeHide result

, CSS . , Javascript, , , .

?

+4
2

z-index, :

  • position: relative .subcategory, , z-index
  • z-index: 1 .subcategory
  • z-index: 2 .subhead

.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>
Hide result
+4

, : .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>
Hide result

, , .

+1

Source: https://habr.com/ru/post/1684779/

More articles:


All Articles