当内容通过固定的div

Question

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

我希望页面的内容在固定的实体菜单下滚动并消失，因此它不会在菜单的间隙和页面顶部之间显示，但仍然能够看到背景图像

我尝试了各种css样式，jquery脚本，但我似乎无法想象如何去做。

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

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

这有可能实现吗？

Answer 1

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

如果你做需要背景滚动，你可以使用上面的方法，但是在滚动时使用JavaScript来改变正文的背景位置和屏蔽div。 示例： http://codepen.io/bvisness/pen/WvXJae

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