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

时间:2014-04-05 01:44:39

标签: html css css3 z-index fixed

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

我已经尝试了许多z-index实验但没有成功。关于下一步该尝试的任何想法?

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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