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

Question

我正在处理的站点有几个div部分，每个部分都代表视口的宽度和高度。它们是垂直堆叠的，每个都有相对定位(参见Codepen)。每个元素内部都有一个固定位置的h1。我希望每个元素中固定的h1只有在其各自的父元素可见时才保持可见。

我已经尝试了许多z-index实验，但都没有成功。对下一步要尝试什么有什么想法吗？

Answer 1

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

但有两种选择，第一种是将位置更改为绝对(对位置的调整基于具有相对、绝对、固定或DOM根位置的最接近的父元素)，并隐藏适当的父元素。

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

Answer 2

您可以使用js来实现效果。这是带有jQuery的example。

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