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

Question

我正在处理的网站有几个

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

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

只在其父元素可见时保持可见。

我已经尝试了许多z-index实验，但都没有成功。有什么建议可以尝试吗？

- Hunter

---

在h1上使用position:absolute而不是position:fixed。那样做是否实现了您要达到的效果？ - Dave

你是否在寻找类似于这个的东西？ - aloisdg

如果我错了，请有人纠正我，但我认为没有纯CSS的方法来确定元素是否在视口内。如果您愿意使用JavaScript或jQuery，我肯定可以帮助您解决这个问题。 - Chad

Answer 1

由于固定位置元素位于视口而不是DOM中，这意味着您需要操纵HTML标签才能实现您想要的效果，这几乎是不可能的。但有两个选择：第一种是将位置更改为绝对定位（根据具有相对、绝对、固定位置或DOM根位置的最近父元素进行位置调整），并隐藏适当的父元素；第二种选择是使用您喜欢的JS库来响应用户交互，而不是包装它，以便简单地隐藏和显示固定元素。

- Brian Bolli

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

- Ararat Harutyunyan