Html 如何使固定元素仅在其父元素可见时才可见？

我正在处理的站点有几个

div

部分，每个部分都是视口的宽度和高度。它们垂直堆叠，每个都具有相对定位（请参见）。每个元素内部都有一个固定位置

h1

。我希望每个元素中的固定

h1

仅在其各自的父元素可见时才保持可见

---

我已经尝试了很多z指数实验，但都没有成功。有没有关于下一步尝试的想法？

因为固定位置元素位于视口中，而不是DOM中。这意味着您需要操纵HTML标记，使您想做的事情几乎不可能

但是有两个选项，第一个太过简单，将位置更改为绝对（位置的调整基于位置为相对、绝对、固定或DOM根的父元素），并隐藏相应的父元素

---

第二种选择是使用您喜爱的JS库简单地隐藏和显示固定元素，以响应用户交互，而不是包装它。

您可以使用JS来实现结果。下面是jQuery的示例

function showCurrentTitle(){
jQuery('.section h1').hide()
    .each(function(i, el){
        var o = parseInt(jQuery(this).parent().offset().top);
        var h = jQuery(this).height();
        if(o <= jQuery(document).scrollTop() ||
            o + h < jQuery(document).scrollTop() + jQuery(this).height()){
            jQuery(this).show();
        };
    });
}
showCurrentTitle();
jQuery(document).scroll(function(e){
    showCurrentTitle();
});

函数showCurrentTitle（）{
jQuery（'.section h1'）.hide（）
.每个（功能（i，el）{
var o=parseInt（jQuery（this.parent（）.offset（）.top）；
var h=jQuery（this）.height（）；
如果（o使用position absolute（绝对位置）而不是h1上的position fixed（固定位置）。这是否实现了您所寻找的目标？您是否在寻找类似的东西？如果我错了，请有人纠正我，但我认为没有办法用纯CSS确定某个元素是否在视口中。如果您对Javascript或jQuery开放，我肯定可以帮助您解决此问题在