让内容在通过固定 div 时消失答案

【问题标题】：Have content disappear as it passes under a fixed div让内容在通过固定 div 时消失
【发布时间】：2015-09-09 22:29:57
【问题描述】：

我有一个固定的菜单，使用纯色填充，距离页面顶部大约 20 像素，因此您可以看到空间之间的背景。

我想让页面的内容在固定的实体菜单下滚动并消失，这样它就不会显示在菜单和页面顶部之间的间隙，但仍然可以看到背景图像。

我尝试了各种 css 样式、jquery 脚本，但我似乎不知道如何去做。

我确实有一个 jquery 脚本，它会在达到某个点时使不透明度变为 0，但这只会使整个内容消失，而不仅仅是距离顶部 100 像素以下的块：

$(window).scroll(function() {
    if ($(this).scrollTop() <= 100) {
        $( ".cont" ).fadeOut();
    } else {
        $( ".cont" ).fadeIn();
    }
});

这甚至可以实现吗？

【问题讨论】：

标签： jquery scroll opacity

【解决方案1】：

如果您不需要需要背景与其余内容一起滚动，您可以在页面顶部放置一个固定位置的div，并使用相同的背景图像。这将覆盖标题上方的内容并与背景无缝融合。 示例： http://codepen.io/bvisness/pen/VLrxry

如果你确实需要背景来滚动，你可以使用上面的方法，但是在你滚动的时候使用 JavaScript 来改变 body 的 background-position 和 masking div。 示例： http://codepen.io/bvisness/pen/WvXJae

警告：在滚动条上重新定位背景图像可能是一个巨大的性能问题，因此请谨慎使用。

【讨论】：