使用 z-index 剪裁标签

Question

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

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;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>

</body>
</html>

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

是否可以安排 z-indexes 来达到这个结果？是否有另一种更好的方法来裁剪标签，使其在视口的 50% 处对齐？

非常感谢您的贡献！

Answer 1

试试这个代码

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

$(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();
}
});
});

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;
}

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

使用 z-index 剪裁标签

clipping labels with z-index

html

javascript

css

jquery

z-index