褪色 <div> 消失在视频标题后面答案

【问题标题】：Fading <div> disappearing behind video header褪色 <div> 消失在视频标题后面
【发布时间】：2020-08-04 15:13:07
【问题描述】：

我的网站上有一个视频标题，带有一个向下滚动按钮，当它接近其链接的锚点时，它的不透明度从 1 逐渐淡入到 0。褪色的 js 本身工作正常，但有东西干扰它。它有一个问题，当它在视频标题上移动时它会消失，这是脚本：

$(document).scroll(function (e) {
    // offsetTop will be computed based on the closest relatively positioned parent element
    // since your anchor has none, his will return distance to document top
    let destination_y = $("#anchor")[0].offsetTop;
    let scrollbar_y = (window.scrollY); // top of scrollbar y position

    // subtract 1 to generate the css opacity level based on ratio
    let opacity = 1 - (scrollbar_y / destination_y); 
    $(".godown").css("opacity", opacity);
});

这是codepen。

如您所见，当它移过视频标题时，它会立即消失，而不是像应有的那样缓慢淡入 0。

【问题讨论】：

标签： html jquery css twitter-bootstrap

【解决方案1】：

您所要做的就是稍微修改一下您的 CSS 代码。

添加以下内容：

#scroller {
    position: fixed;
    z-index: 999;
}

这是codepen。

这应该可以解决问题！

【讨论】：

【解决方案2】：

从 CSS 中 <header> 内的 <video> 中删除 z-index 属性

您可以使用动画方法并将速度设置为“慢”，以使其更好。

【讨论】：

【解决方案3】：

您的视频具有更高的 z-index - 因此它位于 #scroller 之上。只需给#scroller 元素一个非静态 位置（z-index 不适用于static 元素）和更高的z-index，以便它位于视频元素的顶部.

来自docs：

z-index CSS 属性设置定位元素的 z-order 和它的后代或弹性项目。具有较大的重叠元素 z-index 覆盖那些较小的。

【讨论】：