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

【问题标题】：How can I make fixed elements visible ONLY when their parent elements are visible?如何仅在其父元素可见时才使固定元素可见？
【发布时间】：2014-04-05 01:44:39
【问题描述】：

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

我已经尝试了许多 z-index 实验，但均未成功。有什么想法可以尝试下一步吗？

【问题讨论】：

使用绝对位置而不是 h1 上的固定位置。这是否实现了您的目标？
你在寻找类似this 的东西吗？
如果我错了，有人纠正我，但我认为没有办法用纯 CSS 确定元素是否在视口内。如果您对 Javascript 或 jQuery 持开放态度，我绝对可以为您提供帮助

标签： html css z-index fixed

【解决方案1】：

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

不过有两个选项，第一个是将位置更改为绝对位置（对位置的调整基于壁橱父级，位置为相对、绝对、固定或 DOM 根）并隐藏适当的父元素。

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

【讨论】：

【解决方案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();
});

【讨论】：