用z-index剪切标签

Question

我在一个部分的中间对齐了垂直标签“PINK”。 当我向下滚动到下一部分时，下一部分具有更高z-index的“PINK”正在被覆盖。

<iframe class="popup-youtube-player" src="https://www.youtube.com/embed/C0DPdy98e4c?enablejsapi=1&version=3&playerapiid=ytplayer" width="640" height="360" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>

$('.tabs li a').on('click', function() {

$('.popup-youtube-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
});

div.back1 {
    background-color: #FF00FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 10;
}
div.text1 {
	transform: rotate(-90deg);
    position: fixed;
    top: 50%;
    background-color: #FFFFFF;
    z-index: 20;
}
div.back2 {
    background-color: #0000FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 30;
}

我想在第二部分中有第二个标题“BLUE”，如下面的模型所示。

是否可以安排z索引来实现此结果？ 是否有另一种更好的方法来剪切标签，使其对齐保持在视口的50％处？

非常感谢您提供的任何贡献！

Answer 1

试用此代码

因为你标记了jquery，我用它来添加类fixed

＆＃13;

＆＃13;

$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
  $('.blue-text').show();
  if($('.blue').offset().top <= $('.pink-text').offset().top){
     $('.blue-text').addClass('fixed');
  }
}
else{
  $('.blue-text').removeClass('fixed');
  $('.blue-text').hide();
}
});
});

＆＃13;

div.back1 {
    background-color: #FF00FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 10;
}
div.text1.fixed {
	transform: rotate(-90deg);
    position: fixed;
    top: 50%;
    background-color: #FFFFFF;
    z-index: 20;
}
div.back2 {
    background-color: #0000FF;
    position: relative;
    width: 100%;
    height: 2000px;
    z-index: 30;
}
.blue,.pink {
    position: relative;
}
.text1 {
    position: absolute;
    top: 10px;
    z-index: 31;
    transform: rotate(-90deg);
    background-color: #FFFFFF;
}
.text1.blue-text.fixed{
    z-index: 31;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;