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

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

2 个答案: