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

Question

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

我已经尝试了许多 z 指数实验，但没有成功。关于下一步要尝试什么的任何想法？

Answer 1

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

但是有两个选项，首先是将位置更改为绝对（对位置的调整基于具有相对，绝对，固定或DOM根位置的壁橱父元素）并隐藏适当的父元素。

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

Answer 2

你可以

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